Javascript form validation return

Question

I am slightly new to javascript and I'm starting to understand how this coding mechanism works. I created a simple html form with a number of fields. I am using javascript to acquire the data from the field and validate it through a number of validation functions. The following code is the javascript I'm currently using:

function Validation()  
{  
    submit_name = document.getElementById('txt_Name').value;
    submit_surname = document.getElementById('txt_Surname').value;
    submit_mobilenumber = document.getElementById('MobileNumber').value;


    if(checkName(submit_name))
        {
    if(checkSurname(submit_surname))
            {
    if(checkMobile(submit_mobilenumber))
                {
                } 
            }
        }
    return false;
}

My question is this: In the case of this code, the main function(Validation()) will traverse all the individual functions one by one?

If for example the checkName() function returns false, will the other two validation functions checkSurname() and checkMobile() run or will the program stop at the first one?

The reason for my question is that after all the validation functions have returned through I want to add another function to save everything to a file. However this should only be done when all the forms have been validated. Any help is much appreciated thanks in advance.

If checkName() fails, then it would not enter the if block itself, i hope i answered your question. — dreamweiver
– dreamweiver, Commented May 7, 2013 at 9:47
I would suggest you to do individual validation of the fields rather than nesting the conditions. — dreamweiver
– dreamweiver, Commented May 7, 2013 at 9:48
If first function return false, your Validation function will return false, and code inside if statment will not execute. — Sudz
– Sudz, Commented May 7, 2013 at 9:50
its bad interms of logic. when you do validation of the fields individually , then you can prompt the user all the validations errors at once, rather than prompting him to correct his name , then surname and so on . finally what matters is user`s experience,so do it wisely always — dreamweiver
– dreamweiver, Commented May 7, 2013 at 9:51

thebreiflabb · Accepted Answer · 2013-05-07 09:54:33Z

3

I would rather go with a validator that returns each one of the fields that contains an error, that way you can show the users which fields are wrongly filled out

function Validation() {
    var submit_name = document.getElementById('txt_Name').value,
        submit_surname = document.getElementById('txt_Surname').value,
        submit_mobilenumber = document.getElementById('MobileNumber').value,
        errors = [];

    if(!checkName(submit_name)) {
        errors.push({
            id: 'txt_Name',
            message: 'Name is required'
        });
    }

    if(!checkSurname(submit_surname)) {
        errors.push({
            id: 'txt_Surname',
            message: 'Surname is required'
        });
    }

    if(!checkMobile(submit_mobilenumber)) {
        errors.push({
            id: 'MobileNumber',
            message: 'Mobile number is required'
        });
    }

    return errors;
}

var errors = Validation();

if(errors.length === 0) {
    // No errors, do your stuff
} else {
    // Loop errors and do something
    for(var i = 0; i < errors.length; i++) {
        // can mark the element with document.getElementById(errors[i].id)
        alert(errors[i].message);
    }
}

answered May 7, 2013 at 9:54

thebreiflabb

1,54410 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DaGLiMiOuX Over a year ago

This improves a bit my answer adding some error messages for each element. Using mine you can just show something like 'Please, fill all inputs' or something like that. It's not bad at all both solutions, depends only on how much specific you want to be. Nice one mate +1

thebreiflabb Over a year ago

Yeah it really depends on the needs of the developer. I just personally prefer to have something like this when I validate forms.

DaGLiMiOuX · Accepted Answer · 2013-05-07 09:58:01Z

2

An easy solution (without ignoring your other check functions) for your validation should be:

function Validation()  
{  
    var booleanValidation = false;
    var check_submit_name = checkName(document.getElementById('txt_Name').value);
    var check_submit_surname = checkSurname(document.getElementById('txt_Surname').value);
    var check_submit_mobilenumber = checkMobile(document.getElementById('MobileNumber').value);

    if (check_submit_name === false || check_submit_surname === false || check_submit_mobilenumber === false) {
        booleanValidaation = false;
    } else if (check_submit_name === true && check_submit_surname === true && check_submit_mobilenumber === true) {
        booleanValidaation = true;
    }

    return booleanValidation;
}

edited May 7, 2013 at 9:58

answered May 7, 2013 at 9:51

DaGLiMiOuX

8899 silver badges29 bronze badges

Comments

imulsion · Accepted Answer · 2018-02-27 08:38:24Z

2

The program will stop at the first method to return false, since all of them are included in each other. So if checkname() returns false, validation() will return false, and the same for the other functions.

// if false, validate() returns false. if true, checksurname() called
if(checkName(submit_name))
{
    // if false, validate() returns false. if true, checkMobile() called
    if(checkSurname(submit_surname))
    {
        // if false, validate() returns false
        if(checkMobile(submit_mobilenumber))
        {
        }
    }
}
return false;

Although as dreamweiver said, individual validation would be better:

if(checkname()&&checkmobile()&&checksurname())
{
    return true;
}
else
{
    return false;
}

edited Feb 27, 2018 at 8:38

user8280225

answered May 7, 2013 at 9:45

imulsion

9,07620 gold badges59 silver badges85 bronze badges

Comments

Rickyrock · Accepted Answer · 2013-05-07 09:52:14Z

0

if checkName(submit_name) will return false then

if(checkName(submit_name)) will become if(false) so condition will be false so inside of if-condition code will be not execute. and execution will continuously.

This will apply for all if-condition.

answered May 7, 2013 at 9:52

Rickyrock

3282 gold badges6 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript form validation return

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related