2

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()">
3
  • First clear the error and then call validate function. Commented Oct 11, 2015 at 11:06
  • document.getElementById('textPassword').innerHTML= ' '; Commented Oct 11, 2015 at 11:07
  • What do you mean? I am new to programming Commented Oct 11, 2015 at 11:07

4 Answers 4

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

}

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

Comments

0

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= ' '
....
....
}

Comments

0

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;
}

Comments

0

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;
    }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.