jQuery form validation with .bind('submit')

Here is the code sample of jQuery validation with form bind submit function.

Here is the script to demonstrate how to validate in JQuery with form bind submit function.
 

Step 1: Download the attached project, copy and add given .js file to your project.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Step 2: Add a form with HTML controls.

<form>
<table>
<tr>
<th>
<label>
* First Name:</label>
</th>
<th>
<label>
* Last Name:</label>
</th>
</tr>
<tr>
<td>
<input class='mktFormText mktFormString mktFReq input_txt1' id="FirstName" maxlength='255'
name="FirstName" tabindex='1' type='text' value="">
<br>
</td>
<td>
<input class='mktFormText mktFormString mktFReq input_txt1' id="LastName" maxlength='255'
name="LastName" tabindex='2' type='text' value="">
<br>
</td>
</tr>
<tr>
<th>
<label>
* Company Name:</label>
</th>
<th>
<label>
* Email Address:</label>
</th>
</tr>
<tr>
<td>
<input class='mktFormText mktFormString mktFReq input_txt1' id="Company" maxlength='255'
name="Company" tabindex='3' type='text' value="">
<br>
</td>
<td>
<input class='mktFormText mktFormEmail mktFReq input_txt1' id="Email" maxlength='255'
name="Email" tabindex='4' type='text' value="">
<br>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input id='mktFrmSubmit' name='submitButton' class="input_submit" type='submit' value='Submit'>
</td>
</tr>
</table>
</form>

Step 3: Add script for validation on various input controls.

 

<script type="text/javascript">
$(function () {
$('form').bind('submit', function (e) {
var $firstName = $("#FirstName"), $lastName = $("#LastName"), $company = $("#Company"), $email = $("#Email"), errors = "";
if (!$firstName.val().length) {
errors += "* Please enter your first name.\n";
}
if (!$lastName.val().length) {
errors += "* Please enter your last name.\n";
}
if (!$company.val().length) {
errors += "* Please enter your company name.\n";
}
if (!$email.val().length) {
errors += "* Please enter your email address.\n";
}
if (errors.length) {
alert("One or more errors occurred:\n\n" + errors);
return false;
}
});
})
</script>

Step 4: Run and check.