CODEWITHSUNDEEP
javascripthtmlvalidationevents
v8rs
v8rs

Reputation: 307

Validate forms using javascript

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()">

Upvotes: 2

Views: 139

Answers (4)

kannan
kannan

Reputation: 711

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

}

Upvotes: 3

ryubro
ryubro

Reputation: 338

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

Upvotes: 0

Johnny Magrippis
Johnny Magrippis

Reputation: 729

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

Upvotes: 0

Amin Akhyani
Amin Akhyani

Reputation: 39

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

Upvotes: 0

Related Questions