validating forms - javascript - help needed

[goldy300]

I've got this code from somewhere and modified it a bit but its displaying an alert for everything even after the form is filled correctly.

You can see it work here: http://daniel.classroomonline.info/j...t/loggedin.htm

Heres what I need to do and perhaps there is an easier way to do this.

The validation must consist of at least the following components

·Numeric validation
·Length of field validation
·Date validation
·Compulsory field validation

HTML objects being validated must consist of at least one instance of EACH OF text boxes, selection lists, radio button and check boxes. A postcode and email address must be two of the fields that are validated.

Appropriate error messages for each problem should be displayed.
In addition, the cursor must be returned to the field that contains the first error.Include a reset button to clear all the form fields.

<script type='text/javascript'>

function Validate(){
    // Creating variable for field names
    var firstname = document.getElementById('firstname');
    var addr = document.getElementById('addr');
    var postcode = document.getElementById('postcode');
    var state = document.getElementById('state');
    var username = document.getElementById('username');
    var email = document.getElementById('email');
    var thedate = document.getElementById('txtDate');

    
    if(isAlphabet(firstname, "Please enter only letters for your name")){ // checks for alphabetical letters only
        if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ // check for both alphabetic and numeric characters only
            if(isNumeric(postcode, "Please enter a valid postcode code")){ // check for numeric characters only
                if(madeSelection(state, "Please Choose a State")){// checks if a selection is made
                    if(lengthRestriction(username, 6, 8)){ // checks the username is between 6 and 8 characters
                        if(emailValidator(email, "Please enter a valid email address")){ //checks if is a valid email address
                            if(dateValidator(thedate,"Please enter valid date")){ // checks for valid date and correct format
                                
                                return true;

                            }
                        }
                    }
                }
            }
        }
    }
    
    
    return false;
    
}

// below are all the individual functions that test for valid input of each field in the forms

//checks that an element is not empty, this isnt used anywhere that I can see
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

//this one checks to make sure the inout is only numbers 0-9
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    //alert(elem.value)
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

//this one tests for letters, either uppercase or lowercase and will also allow a space since full name is asked for
function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z\s]+$/;
    //alert(elem.value)
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

//this one is used to test for letters and numbers and is used for the address
function isAlphanumeric(elem, helperMsg){
    alert(elem.value)
    var alphaExp = /^[0-9a-zA-Z\s]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

/*this one is used to check for a valid length and is applied to the username where 6-8 characters are required, the min & max are set in the if statements at the top */

function lengthRestriction(elem, min, max){
    alert(elem.value)
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

//this one checks whether the user has made a selection from the drop downs, if it is still set on please choose then they havent
function madeSelection(elem, helperMsg){
alert(elem.value)
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

/*this one evaluates whether the email is the correct format for an email eg. username, @ symbol and dot and anyother variation or letters and numbers */
function emailValidator(elem, helperMsg){
alert(elem.value)
    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;
    }
}    

//this one validates the correct date format has been entered as requested
function dateValidator(elem, helperMsg){
alert(elem.value)
    var dateExp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/ ;
    if(elem.value.match(dateExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

[abc-and]

To solve the problem just comment all "alert(elem.value)" in your code.

[dickey]

do you have a working link on where it actually gives you the problem? *silly me why would someone upload this kind of stuff...

can you attach a file here I want to try and have a look-see.

[goldy300]

do you have a working link on where it actually gives you the problem? *silly me why would someone upload this kind of stuff...

can you attach a file here I want to try and have a look-see.

Yeah actually commenting those alerts fixed the problem but I realized I have to put in a radio button validation so I put gender, and checkbox which I'll eventually put in agree to terms.

I do have a working link... didn't realize it was exceeded bandwidth. http://newdesigns.x10hosting.com/js_...t/loggedin.htm

I've tried to include the gender in the script, just look for ////////////

function Validate(){
    // Creating variable for field names
    var firstname = document.getElementById('firstname');
    var addr = document.getElementById('addr');
    var postcode = document.getElementById('postcode');
    var state = document.getElementById('state');
    var username = document.getElementById('username');
    var email = document.getElementById('email');
    var thedate = document.getElementById('txtDate');
    var gender = document.getElementById('gender');
    
    if(isAlphabet(firstname, "Please enter only letters for your name")){ // checks for alphabetical letters only
        if (checkGender(gender, "Please choose your Gender: Male or Female" )){  ///////////////////////////////      
            if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ // check for both alphabetic and numeric characters only
                if(isNumeric(postcode, "Please enter a valid postcode code")){ // check for numeric characters only
                    if(madeSelection(state, "Please Choose a State")){// checks if a selection is made
                        if(lengthRestriction(username, 6, 8)){ // checks the username is between 6 and 8 characters
                            if(emailValidator(email, "Please enter a valid email address")){ //checks if is a valid email address
                                if(dateValidator(thedate,"Please enter valid date")){ // checks for valid date and correct format
                                
                                return true;

                                }
                            }
                        }
                    }
                }
            }
        }
    }    
    return false;
    
}

// below are all the individual functions that test for valid input of each field in the forms

//checks that an element is not empty, this isnt used anywhere that I can see
function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

//this one checks to make sure the inout is only numbers 0-9
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    //alert(elem.value)
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

//this one tests for letters, either uppercase or lowercase and will also allow a space since full name is asked for
function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z\s]+$/;
    //alert(elem.value)
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

//this one is used to test for letters and numbers and is used for the address
function isAlphanumeric(elem, helperMsg){
    //alert(elem.value)
    var alphaExp = /^[0-9a-zA-Z\s]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

//CHECKS IF USERNAME IS BETWEEN 6 - 8 CHARACTERS OTHERWISE WILL ALERT MESSAGE

function lengthRestriction(elem, min, max){
    //alert(elem.value)
    var uInput = elem.value;
    if(uInput.length >= min && uInput.length <= max){
        return true;
    }else{
        alert("Please enter between " +min+ " and " +max+ " characters");
        elem.focus();
        return false;
    }
}

//CHECKS IF A SELECTION HAS BEEN MADE FROM THE DROPDOWN LIST, IF IS PLEASE CHOOSE, WILL ALERT MESSAGE
function madeSelection(elem, helperMsg){
    //alert(elem.value)
    if(elem.value == "Please Choose"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

//GENDER VALIDATION ////////////////////////////////////////////////////////// I have no idea here??
function checkGender(elem, helperMsg){
    //alert(elem.value)
    if(gender[0].checked == false ) && (gender[1].checked == false){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

// CHECKS THAT A VALID EMAIL ADDRESS HAS BEEN FILLED IN
function emailValidator(elem, helperMsg){
        //alert(elem.value)
    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;
    }
}    

//CHECKS THAT THE CORRECT DATE AND FORMAT IS FILLED IN
function dateValidator(elem, helperMsg){
        //alert(elem.value)
    var dateExp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/ ;
    if(elem.value.match(dateExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

And it was just a basic <input type=radio id=gender value=male> ... and female.

[freecrm]

There's a brilliant set of form validation tools done by Spry (normally integrated into DW CS3/4, but you should be able to use the basic JS.

I use them on numerous forms and they are all AJAX based.

Check out Spry Widgets at http://livedocs.adobe.com/

You can get the JS at places like

www.koders.com