when submit with empty value, there will should be error-msg at both of inputs. However, it is working correctly.
In side of script is validation for empty value if input empty value error-msg will be changed to display:block
this is the code below, anyone could help me i am very appreciate.
function validation(thisForm) {
//validation of fName
if (!thisForm.fname.value.length) {
document.getElementById('fname-error').style.display = "block";
return false;
}
//validation of lName
if (!thisForm.lname.value.length) //if there is no input to lName
{
document.getElementById('lname-error').style.display = "block";
return false;
}
return true;
}.error-msg {
display: none;
color: red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>error-msg will not display correctly at the same time</title>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<legend>Application Name</legend>
<div class="name">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<span class="error-msg" id="fname-error">First name is required</span>
</div>
<div class="name">
<label for="lname">Last Name </label>
<input type="text" id="lname" name="lname" size="50">
<span class="error-msg" id="lname-error">Last name is required</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>