CODEWITHSUNDEEP
javascripthtml
Sid
Sid

Reputation: 488

Why does this form get submitted even if the required fields are left empty?

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.net/cGuCK.jpg

Upvotes: 3

Views: 10762

Answers (5)

Arun P Johny
Arun P Johny

Reputation: 388326

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

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28538

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

Upvotes: 0

Max
Max

Reputation: 2112

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.net/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>

Upvotes: 6

Rakesh Shetty
Rakesh Shetty

Reputation: 4568

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

Upvotes: 0

Rishi Dua
Rishi Dua

Reputation: 2334

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

Upvotes: 3

Related Questions