The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> JS - Form Validator, Form Validation
akforce
post Aug 8 2009, 11:17 AM
Post #1





Group: Members
Posts: 6
Joined: 30-July 09
Member No.: 9,277



i cant see to get my finger on the validation correctly, im trying to achieve that:

(*) Required fields are required in the final submission
All other fields are validated by their content type
But all fields without (*) Required are not needed for the form to be submitted

http://www.on-media.co.uk/clients/hlmd/

http://www.on-media.co.uk/clients/hlmd/jscript/contact.js

is the below code:

CODE
function formValidator(){
    // Make quick references to our fields
    var name = document.getElementById('name');
    var sname = document.getElementById('sname');
    var phone = document.getElementById('phone');
    var cell = document.getElementById('cell');
    var calltime = document.getElementById('calltime');
    var email = document.getElementById('email');
    var address = document.getElementById('address');
    var zip = document.getElementById('zip');
    var loana = document.getElementById('loana');
    var loanb = document.getElementById('loanb');
    var balance = document.getElementById('balance');

    
    // Check each input in the order that it appears in the form!
    if(isAlphabet(name, "Please enter only letters for your name")){
        if(isAlphabet(sname, "Please enter only letters for your surname")){
            if(isNumeric(phone, "please enter only numbers for your phone number")){
                if(isNumeric(cell, "please enter only numbers for your cell number")){
                    if(madeSelection(calltime, "Please select a time for your callback")){
                        if(isAlphanumeric(address, "please enter your address in numbers and letters")){
                            if(isNumeric(zip, "Please enter a valid zip code")){
                                if(emailValidator(email, "Please enter a valid email address")){
                                    if(isAlphanumeric(loana, "Please enter the value of your loan")){
                                        if(isAlphanumeric(loanb, "Please enter the value of your loan")){
                                            if(madeSelection(balance, "Select the duration you are behind on your loan re-payments")){
                                                return true;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    return false;
    
}
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function madeSelection(elem, helperMsg){
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}


is my form:

CODE
<form onsubmit='return formValidator()' ><div id="contactfC">
<div id="contactf1">
  <table width="240" border="0">
    <tr>
      <td width="102"><span style="color:#F00;">*</span>Name:</td>
      <td width="108"><input name="name" type="text" id="name" size="15" /></td>
      </tr>
    <tr>
      <td><span style="color:#F00;">*</span>Surname:</td>
      <td><input name="sname" type="text" id="sname" size="15" /></td>
      </tr>
    <tr>
      <td><span style="color:#F00;">*</span>Phone Number:</td>
      <td><input name="phone" type="text" id="phone" size="15" /></td>
      </tr>
    <tr>
      <td>Cell Number:</td>
      <td><input name="cell" type="text" id="cell" size="15" /></td>
      </tr>
    <tr>
      <td>Best time to call:</td>
      <td><select name="calltime" id="calltime">
        <option value="Morning">Morning</option>
        <option value="Afternoon">Afternoon</option>
        <option value="Evening">Evening</option>
        <option value="Anytime">Anytime</option>
        <option value="Please Choose" selected="selected">Please Choose</option>
      </select></td>
      </tr>
    <tr>
      <td>Address:</td>
      <td><textarea name="address" id="address" cols="15" rows="3"></textarea></td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div id="contactf2">
  <table width="245" border="0">
    <tr>
      <td width="133"><span style="color:#F00;">*</span>Zip Code:</td>
      <td width="118"><input name="zip" type="text" id="zip" size="15" /></td>
      </tr>
    <tr>
      <td><span style="color:#F00;">*</span>Email:</td>
      <td><input name="email" type="text" id="email" size="15" /></td>
      </tr>
    <tr>
      <td><span style="color:#F00;">*</span>1st Loan Amount:</td>
      <td><input name="loana" type="text" id="loana" size="15" /></td>
      </tr>
    <tr>
      <td>2nd Loan Amount:</td>
      <td><input name="loanb" type="text" id="loanb" size="15" /></td>
      </tr>
    <tr>
      <td><span style="color:#F00;">*</span>Balance Past Due:</td>
      <td><select name="balance" id="balance">
        <option value="One Month">1 Month</option>
        <option value="Two Months">2 Months</option>
        <option value="Three Months">3 Months</option>
        <option value="Four Months">4 Months</option>
        <option value="Five Months +">5 Months +</option>
        <option value="Not Applicable">N/A</option>
        <option value="Please Choose" selected="selected">Please Choose</option>
      </select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="button" id="button" value="Submit" /></td>
    </tr>
  </table>
</div>
</div></form>


i appricate any help thanks smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2024 - 04:46 PM