javascript onsubmit event for multiple functions check doesn't work

Question

In mi validation form I have two input fields in order to write email and confirm it. Before the submit informations, two confirms are needed: 1-email must seems an email, 2-email one must match the email two. I can handle these statements each one using two separate javascript functions but i fail when I try to check them all in the onsubmit event attribute. If I write a correct email adress, the form reach the action destination, even if the confirm email doesn't match. Looking around the web doesn't help me. Here u are the code (html/javascript):

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Email Validation</title>

    <script type="text/javascript">

        function isEmail(email, output) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;        
            var email = document.getElementById(email).value;

            if (regex.test(email)) {
                return true;
            } else {
                document.getElementById(output).innerHTML = 'wrong email';
                return false;
            }
        }


        function compareEmail(email, emailToCompare, output){
            var email = document.getElementById(email).value;
            var emailToCompare = document.getElementById(emailToCompare).value;

            if(emailToCompare == email){
                document.getElementById(output).innerHTML = 'ok!';
                return true;
            }else{
                document.getElementById(output).innerHTML = 'emails dont match!';
                return false;
            }
        }


        function check(){
            return isEmail() && compareEmail();
        }

    </script>

</head>

<body>

    <form action="file.php" method="post" onSubmit="return check()">
        <p>Email</p>
        <input type="text" name="email" maxlength="50" id="email">
        <div id="email_result">
        </div>
        <br/>
        <p>Confirm email</p>
        <input type="text" onpaste="return false;" autocomplete="off" name="email" maxlength="50" id="confirm_email" onKeyUp="return compareEmail('email', 'confirm_email', 'confirm_email_result')">
        <div id="confirm_email_result">
        </div>

        <input type="submit" name="submit" value="Register" onclick="return isEmail('email', 'email_result');">
    </form>

</body>

The double control doesn't work with the follow script too:

function check(){
    if (isEmail() && compareEmail()){
        return true;
    }else{
        return false;
    }
}

Nothing changes if I use:

onSubmit="return check()"

or

onSubmit="check()"

in the form event attribute.

Guffa · Accepted Answer · 2015-12-05 20:29:04Z

1

You are missing the parameters in the function calls:

function check(){
  return isEmail('email', 'email_result') && compareEmail('email', 'confirm_email', 'confirm_email_result');
}

Side note: You have declared variables in the functions with the same name as the parameters. It still works at it is, but the variables are not actually created but will overwrite the parameter values, so the code is a bit confusing.

edited Dec 5, 2015 at 20:29

answered Dec 5, 2015 at 19:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

1 Comment

Matteo Corona Over a year ago

Thanks Guffa! It works now, and thanks for the suggestion about the variables vs parameters, I rewritten the code without parameters.

Collectives™ on Stack Overflow

javascript onsubmit event for multiple functions check doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related