When integrating jQuery validation in ASP.NET MVC, here's how to apply client-side remote validation using javascript code. Below
are the snippets and screenshots. Make sure to render the
jquery.validate.min.js file in your View or Layout.
Email HTML Markup:
1
2
3
4
5
6
7 | <div class="form-group has-feedback">
<label for="email" class="control-label col-md-3">Email Address:</label>
<div class="col-md-9">
<input type="email" name="email" id="email" class="form-control" placeholder="Enter email" />
<span class="glyphicon form-control-feedback" id="email1"></span>
</div>
</div>
|
Custom Javascript Validation Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 | $(function () {
$("#frmInput").validate({
submitHandler: function (form) {
//submit once validation rules are met
form.submit();
},
rules: {
.... //other validation statements
email: {
required: true,
email: true,
remote: {
url: "/Home/EmailExists",
type: "post",
data: {
email: function () {
return $('#email').val();
}
}
}
}
},
messages: {
email: {
remote: "Email already in use!"
}
}
.... //other validation statements
});
});
|
Controller Method (You may replace the statements with database checking):
1
2
3
4
5 | [HttpPost]
public JsonResult EmailExists(string email)
{
return Json(!String.Equals(email, "gregmail@co.uk", StringComparison.OrdinalIgnoreCase));
}
|
Invalid Email (Existing/Used):
Valid Email(New/Unused):
Comments
Post a Comment