jQuery form validation with .bind('submit')

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.

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.