Validate forms using javascript

Question

I want to validate 3 inputs (name, email and password) in a form using javascript. When the user submits the form, and all the fields are empty, it works correctly showing the error messages. But then if I write a correct password (length 7) and wrong email and name, and I try to submit the form again the "Password too short" message is stil there and the password is correct. What I am doing wrong?

Javascript file

function verify(){
    if(verName()&verEmail()&verPassword())
    {
        return true;
    }else
    {
        verName();
        verEmail();
        verPassword();
        return false;
    }
}



function verPassword(){
    var ok = true;
    var frm = document.getElementById("register");
    var pass = frm.elements[2].value;
    if(pass.length<6)
    {
        var text="Password too short";
        document.getElementById('textPassword').innerHTML=text;
        ok = false;
    }
    return ok;
}

HTML file

<form id='register' name='register' onsubmit="return verify()">

First clear the error and then call validate function. – kannan Oct 11 '15 at 11:06 — kannan, Oct 11 '15 at 11:06
document.getElementById('textPassword').innerHTML= ' '; – kannan Oct 11 '15 at 11:07 — kannan, Oct 11 '15 at 11:07
What do you mean? I am new to programming – v8rs Oct 11 '15 at 11:07 — v8rs, Oct 11 '15 at 11:07

kannan · Accepted Answer · 2015-10-12T04:50:14.737

3

function verify(){
        document.getElementById('textPassword').innerHTML = ' '; 
if(verName()&verEmail()&verPassword())
{
    return true;
}else
{
    verName();
    verEmail();
    verPassword();
    return false;
}

}

edited Oct 12 '15 at 04:50

answered Oct 11 '15 at 11:11

kannan

691
5
17

score 0 · Answer 2 · answered Oct 11 '15 at 11:11

change your code it like this:

function verify(){
if(verName()&verEmail()&verPassword())
    {
        return true;
    }
    else
    {
    if(verName());
       if(verEmail());
          if(verPassword());
    return false;
    }
}

with this solution, each validation occurs if the previous validation runs true! and if not, just the previous validation errors shows up !

in each function verName(), verEmail() and verPassword(), return Boolean value of TRUE of FALSE

also add this line of code, on your form submit event:

verify() {
document.getElementById('textPassword').innerHTML= ' '
....
....
}

score 0 · Answer 3 · answered Oct 11 '15 at 11:16

The problem is that your verPassword function is adding that error string when the password is invalid, but it doesn't remove it when the password is valid.

Also, your verify function makes little sense.

How about:

function verify(){
    return verName() && verEmail() && verPassword();
}

function verPassword(){
    var frm = document.getElementById("register");
    var pass = frm.elements[2].value;
    var ok = pass.length > 5;
    var text = ok ? "" : "Password too short";

    document.getElementById('textPassword').innerHTML=text;

    return ok;
}

score 0 · Answer 4 · edited May 23 '17 at 11:52

You have to empty the #textPassword element by write something like: document.getElementById('textPassword').innerHTML.

In addition I can see some wrong codes there. First, if every ver* function returns true or false, you better use && rather than & in if condition expression. Or you can just return the evaluated value of the condition expression like this: return verName() && verEmail() && verPassword().

Second, the ver* functions are already called while if evaluate condition expression. No need to call those functions again in else part.

And I don't think you need ok variable in verPassword() function.

I suggest to change the code like below:

function verify(){
    return verName() && verEmail() && verPassword();
}

function verPassword(){
    var frm = document.getElementById("register");
    var pass = frm.elements[2].value;
    var textPassword = document.getElementById('textPassword');
    if (pass.length < 6) {
        var text="Password too short";
        textPassword.innerHTML = text;
        return false;
    } else {
        textPassword.innerHTML = ""; // Empty #textPassword
        return true;
    }
}

Validate forms using javascript

4 Answers4