I've created a Bootstrap form as shown below:
<form id="loginForm" method="post" action="" role="form" class="ajax">
<div class="form-group">
<label for="userName"></label>
<input type="text" class="form-control" id="usrName">
</div>
<div class="form-group">
<label for="passWrd"></label>
<input type="password" class="form-control" id="passWrd">
</div>
<div class="form-group">
<button class="btn btn-default" type="button" id="loginButton">Login</button>
</div>
In my jQuery code, I am handling form validation. How can I trigger the submit() method to make an AJAX call and submit the form after validation?
$(document).ready(function() {
function validateInput(id) {
if($("#"+id).val()==null || $("#"+id).val()=="") {
var div=$("#"+id).closest("div");
div.addClass("has-error");
return false;
} else {
var div=$("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-success");
return false;
}
}
$(#loginButton).click(function() {
if(!validateInput("userName"))
{
return false;
}
if(!validateInput("passWrd"))
{
return false;
}
});
});
How can I implement the ajax call after completing the validation in the above code snippet?
Note: I am not allowed to use any external jQuery plugins for validation.