Whenever we create a form, we always have a requirement to put validation for empty fields on some input fields on form submit. For this we use onSubmit attribute of the form, inside which we can define a function that will have validations.
Example: In the below example I have created a function validateForm() and created onSubmit event on form and called this function inside that. The validateForm() function checks whether the input field is empty or not
<html>
<head>
<title>Demo to put validation on Form</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('input[type="text"]').on("focus",function() {
var id = $(this).attr("id");
if(id == "emailId")
{
if($(this).val() == "")
{
$('#validemailId_error').text("");
}
}
else if(id == "firstName")
{
if($(this).val() == "")
{
$('#validfirstName_error').text("");
}
}
});
});
function validateForm()
{
var valid = true;
if($("#emailId").val() == "")
{
$('#validemailId_error').text("You can't leave this empty.");
valid = false;
}
if($("#firstName").val() == "")
{
$('#validfirstName_error').text("You can't leave this empty.");
valid = false;
}
return valid;
}
</script>
<style>
.error{color: #db4437;font-size:14px;}
</style>
</head>
<body>
<form id="createAccount" class="form-horizontal" method="post" onSubmit="return validateForm();">
<div class="form-group form-group-space">
<label for="inputEmail3" class="col-xs-4 control-label">First Name*</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name">
<span id="validfirstName_error" class="error"></span>
</div>
</div>
<div class="form-group form-group-space">
<label for="inputEmail3" class="col-xs-4 control-label">Email*</label>
<div class="col-xs-8">
<input type="text" name="emailId" id="emailId" class="form-control" placeholder="Email">
<span id="validemailId_error" class="error"></span>
</div>
</div>
<div class="form-group form-group-space">
<div class="col-xs-8">
<input type="submit" value="Submit">
</div>
</div>
</form>
</body>
</html>
Hope thi will help you :)
0 Comment(s)