I am doing JavaScript validation but it's not working properly when I enter last name, it does not display error and submit the form
Question
JavaScript code:
<script>
function check_validation()
{
var Fname = document.frm.Fname.value;
var Lname = document.frm.Lname.value;
var error = 0;
document.getElementById("error").innerHTML = '';
if (Fname == "")
{
var error = 1;
document.getElementById("error").innerHTML += 'First name is required';
}
else
{
var error = 0;
}
if(Lname == "")
{
var error = 1;
document.getElementById("error").innerHTML += 'Last name is required';
}
else
{
var error = 0;
}
if(error == 1)
{
return false;
}
else
{
return true;
}
}
</script>
<body>
<div id="error">
</div>
<form name="frm">
First name : <input type="text" name="Fname" />
Last name : <input type="text" name="Lname" />
<input type="submit" name="submit" onclick="return check_validation();" />
</form>
</body>
The validation is working properly when both values are empty but form is submitted when I directly enter second value in form. I can't find the error.
2 answers
solution1
2 2015-09-28 08:04:14
The problem is you are resetting the error flag if the last value is valid, so all other validation states are lost.
Assume Fname is blank, then error is set to 1 , but then if Lname is filled, you are setting the value of error back to 0 , so the last validation state check will consider only the validation state of Lname all previous states are ignored.
The solution is to set the flags initial value at the beginning, then only update the flag if the value is invalid as shown below. Also if you use true/false values for the flag then there is no need to use another if...else block at the bottom.
function check_validation() {
var Fname = document.frm.Fname.value;
var Lname = document.frm.Lname.value;
var valid = true;
document.getElementById("error").innerHTML = '';
if (Fname == "") {
valid = false;
document.getElementById("error").innerHTML += 'First name is required';
}
if (Lname == "") {
valid = false;
document.getElementById("error").innerHTML += 'Last name is required';
}
return valid;
}
solution2
0 2015-09-28 08:11:07
You set error to 0 if the second one is correct, disregarding of the value of the first one. By the way, instead of using 0/1 you should use booleans, that is exactly their purpose. Also don't set error more than one time (just don't use var when the var is already initialize).
function check_validation()
{
var Fname = document.frm.Fname.value;
var Lname = document.frm.Lname.value;
var error = true;
document.getElementById("error").innerHTML = '';
if (Fname == "")
{
error = true;
document.getElementById("error").innerHTML += 'First name is required';
}
if(Lname == "")
{
error = true;
document.getElementById("error").innerHTML += 'Last name is required';
}
return error;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.