Validation in JQuery with "form bind submit
function event"
Step 1: DownLoad and add given .js file to your page:
<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 :
<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.