how to correctly validate a form using javascript .?

Question

I am trying to validate a form using javascript, Here is my code

    <script type="text/javascript">
    function prevSubmit(){
        var oForm = document.forms[0];
        var pass1= oForm.elements["passwd"];
        var pass2=oForm.elements["repasswd"];
        var flag = 1;
        if (pass1.value.length>16) {
            document.getElementById("passError").innerHTML = "password may atleast 16 chars";
            flag = 0;
        }
        else
            document.getElementById("passError").innerHTML = "";

        if(pass1.value<=16 && pass1.value!=pass2.value)
        {
            document.getElementById("passError").innerHTML = "password must be same";
            flag = 0;
        }
        else
            document.getElementById("passError").innerHTML = "";
        return flag;
    }


</script>

and here is my form element,

        <form id="registration_form" action="registration.php" method="post" onsubmit="return prevSubmit();">
        <p>
            <label>Name</label>
            <input type="text" name="name"/>
            <span id="NameError"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" name="email"/>
            <span id="emailError"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="passwd"/>
            <span id="passError"></span>
        </p>
        <p>
            <label>Repeat Password</label>
            <input type="password" name="repasswd"/>
        </p>            
            <input type="submit" class="button" value="sign up"/>

        </form>

what I am trying to accomplish is check the password, if no match or greater than 16, then show the message and prevent submission, but its not working, Why?

dont use 1 or 0 for flag... this will not help you in prevention of submission use `true` `false` — muneebShabbir, Nov 25 '13 at 04:59

score 2 · Accepted Answer · answered Nov 25 '13 at 04:45

2

Use true and false as the values of flag, not 1 and 0. You have to return false to prevent submission, anything else allows submission.

answered Nov 25 '13 at 04:45

Barmar

741,623
53
500
612

epascarello · Answer 2 · 2013-11-25T05:03:49.010

1

First this error message makes no sense

password may atleast 16 chars

Secondly, your second error check is wrong

if(pass1.value<=16 && pass1.value!=pass2.value)

You are saying if the value is less that the number 16 and the two values do not match.

Why would the value be less that 16? The check should just be

if (pass1.value!=pass2.value)

ANd as the others suggested, use true/false, not 1 and 0 as truthy values.

edited Nov 25 '13 at 05:03

answered Nov 25 '13 at 04:51

epascarello

204,599
20
195
236

The check before would catch that error, if the OP does not want both error messages to show up, than it would be needed. – epascarello Nov 25 '13 at 04:59

score 1 · Answer 3 · answered Nov 25 '13 at 05:29

I agree with answers of Barmar and epascarello.

The if conditions should be implemented in this way:

var oForm = document.forms[0];
var pass1= oForm.elements["passwd"];
var pass2=oForm.elements["repasswd"];
var ctrlError = document.getElementById("passError");

if (pass1.value.length < 16) {
    ctrlError.innerHTML = "Password must be at least 16 characters long.";
    return false;
}
else if (pass1.value != pass2.value) {
    ctrlError.innerHTML = "Passwords do not match.";
    return false;
}
else {
    ctrlError.innerHTML = "";
    return true;
}

A.T. · Answer 4 · 2013-11-25T04:51:21.683

0

just "return false" from javascript method

<input type="submit" class="button" value="sign up" onclick="javascript:return myFunc();"/>

function myFunc()
{
return false;
}

this is basic example of how to prevent submission of form, if we return false then browser/javascript engine prevent further propagation of click event and submission is prevented.

edited Nov 25 '13 at 04:51

answered Nov 25 '13 at 04:45

A.T.

24,694
8
47
65

1

Bad advice to move it to an onclick event! – epascarello Nov 25 '13 at 04:54
yes really bad, simplicity is always bad. By making simple example to beginners is always bad. huh... and one more thing, this form will never submit – A.T. Nov 25 '13 at 04:55
Suggesting the use of `javascript:` is really bad advice and shows you have beginner skills. Do you know what the purpose of `javascript:` is in the onclick? – epascarello Nov 25 '13 at 05:02
inline Js. just equivalent to writing script tag in between the html. – A.T. Nov 25 '13 at 05:11
Read this: http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – epascarello Nov 25 '13 at 05:14

how to correctly validate a form using javascript .?

4 Answers4