I am working with a form in which i take the password input from the user and then javascript checks if the passwords match. But even if the password is required, the form gets submitted if the input box is left empty. I am using javascript to submit the form. Although i have a solution to my problem but i wanted to ask that why this is happening and not the normal action of Please fill in this field, which normally appears when doing so.

HTML-

<form action="check.php" method="POST" id="userform">
USERNAME:<input name="uname" type="text" required/>
PASSWORD:<input type="password" id="upass" name="upass" type="text" required/>
RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required/>
<input type="button" value="Submit" onclick="passCheck()">
</form>

JavaScript-

function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if(pass1 == pass2){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
}
}

EDIT- I want that this should appear when i click on the button and the password fields are left empty:.jpg

I am working with a form in which i take the password input from the user and then javascript checks if the passwords match. But even if the password is required, the form gets submitted if the input box is left empty. I am using javascript to submit the form. Although i have a solution to my problem but i wanted to ask that why this is happening and not the normal action of Please fill in this field, which normally appears when doing so.

HTML-

<form action="check.php" method="POST" id="userform">
USERNAME:<input name="uname" type="text" required/>
PASSWORD:<input type="password" id="upass" name="upass" type="text" required/>
RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required/>
<input type="button" value="Submit" onclick="passCheck()">
</form>

JavaScript-

function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if(pass1 == pass2){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
}
}

EDIT- I want that this should appear when i click on the button and the password fields are left empty:https://i.sstatic/cGuCK.jpg

• javascript
• html

Share Follow edited Jun 18, 2013 at 6:32 Sid asked Jun 18, 2013 at 6:13 SidSid 48822 gold badges66 silver badges2020 bronze badges 2

• 1 Don't put the listener on the submit button, put it on the form's submit handler. A form can be submitted a number of ways without clicking the submit button. Also, you can reference the form as document.forms.userform. Lastly, it's not nice to reset the form just because the user made a mistake, let them fix it themselves. – RobG Commented Jun 18, 2013 at 6:24
• Also, you will still need to validate the values on the server side. You can't depend on JavaScript validation because it can be turned off or form values sent from outside a browser. – Carl Commented Jun 18, 2013 at 6:32

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Because in order for the forms to not be submitted, your function must return false, as well as check to make sure the passwords aren't blank, like so: http://jsfiddle/upgradellc/Heay3/5/

javascript:

function passCheck(){
    var pass1 = document.getElementById('upass').value;
    var pass2 = document.getElementById('reupass').value;
    if(pass1 == pass2 && pass1 != ""){
        return true;
    }
    else{
        alert("Both password inputs do not match. Please retry.");
        document.getElementById('userform').reset();
        return false;
    }
}

html:

<form action="check.php" method="POST" id="userform" onSubmit="return passCheck()" >
    USERNAME:<input name="uname" type="text" />
    PASSWORD:<input type="password" id="upass" name="upass" type="text" />
    RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" />
    <input type="submit" value="Submit" >
</form>

That is because if both are blank

pass1 = NULL pass2 = NULL

Which essentially means pass1 == pass2

[EDIT] Change your code to

function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if((pass1 == pass2) && (pass1!="")){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
}
}

if you don't want to submit the form if password does not match then you have to return false

do like this :- return false

if(pass1!='' && pass2!='')
 {

    if(pass1 == pass2){
            document.getElementById('userform').submit();
        }
        else{
            alert("Both password inputs do not match. Please retry.");
            document.getElementById('userform').reset();
            return false;
        }

}

Also

you have to change your input type="button" to input type="submit"

EDIT :-

You also have to check first wheather your password field is empty or not ,if it is empty then show error and return false

Here is working JsFiddle Demo. try this code:

if(pass1 !="" && pass1 != pass2){
    alert("Both password inputs do not match. Please retry.");
    document.getElementById('userform').reset();
    return false;
}
else{
   document.getElementById('userform').submit();
}

Edit

if you change input type to submit it will automatically check null constraint and still you can validate fields

Here is Demo with type SUBMIT

You need to

<form action="check.php" method="POST" id="userform" onsubmit="return validate()" >
    USERNAME:<input name="uname" id="uname" type="text" required />
    PASSWORD:<input type="password" id="upass" name="upass" type="text" required />
    RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required />
    <input type="submit" value="Submit" />
</form>

And

function validate(){
    var pass1 = document.getElementById('upass').value;
    var pass2 = document.getElementById('reupass').value;
    var username= document.getElementById('uname').value;
    if(username == ""){
        alert('user name cannot be empty')
        return false
    }

    if(pass1 == ""){
        alert('password cannot be empty')
        return false
    }

    if(pass1 != pass2){
        alert("Both password inputs do not match. Please retry.");
        return false;
    }

    return true
}

Demo: Fiddle