Reputation: 850
I have a simple form containing fields like Name, City, State, Phone Number, etc. I'm calling a javascript form validation function on submit button click. The validation function is acting strange. Codes written towards the end of the function is not getting executed and the form is getting submitted. However, when I put those codes towards the beginning of the function then those validations are getting executed.
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" id="submitBtn" name="submitBtn" class="btn btn-danger" onclick="return validate_input();">Add Record</button>
<button type="button" class="btn btn-danger" name="backtoBrowser" onClick="backToPav();">←Back</button>
</div>
</div>
<script>
function validate_input()
{
if(document.getElementById('inputFName').value == ''){
alert("Please enter First Name");
document.getElementById('inputFName').focus();
return false;
}
if(document.getElementById('inputLName').value == ''){
alert("Please enter Last Name");
document.getElementById('inputLName').focus();
return false;
}
if(document.getElementById('ddlBank').value == '0'){
alert("Please select a Bank");
document.getElementById('ddlBank').focus();
return false;
}
if(document.getElementById('inputIFSC').value == ''){
alert("Please enter IFSC");
document.getElementById('inputIFSC').focus();
return false;
}
if(document.getElementById('inputCity').value == ''){
alert("Please enter City name");
document.getElementById('inputCity').focus();
return false;
}
if(document.getElementById('ddlStates').value == '0'){
alert("Please select a State");
document.getElementById('ddlStates').focus();
return false;
}
if(document.getElementById('inputPhone').value == ''){
alert("Enter Phone No.");
document.getElementById('inputPhone').focus();
return false;
}
if(document.getElementById('inputPhone').value != ''){
var ipp = document.getElementById('inputPhone').value;
if(ipp.length < 10)
{
alert('Phone number should be of 10 digits');
document.getElementById('inputPhone').focus();
return false;
}
}
if(document.getElementById('inputEmail').value == ''){
alert("Enter Email id");
document.getElementById('inputEmail').focus();
return false;
}
if(document.getElementById('inputEmail').value != ''){
var emlTxt = document.getElementById('inputEmail').value;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(emlTxt.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
document.getElementById('inputEmail').focus();
return false;
}
}
if(document.getElementById('ddlJob').value == ''){
alert("Please select a Designation");
document.getElementById('ddlJob').focus();
return false;
}
if(document.getElementById('ddlStat').value == ''){
alert("Please select Staff Status");
document.getElementById('ddlStat').focus();
return false;
}
}
Validation for ddlJob & ddlStat not getting executed when placed at the end of function. Please advise what is wron with my code
Upvotes: 0
Views: 29
Reputation: 373
You return true
in your inputEmail
validation and that is causing the validating function execution to end and form submission to not be stopped when email is valid.
You should put return true;
at the end of the validation function (so after ddlStat
validation).
Also - I highly recommend you to read a bit about code formatting, it will make your code easier to understand: https://standardjs.com/rules.html
Upvotes: 1