Thursday, February 11, 2016

ASP.NET MVC 5 Client-Side Remote Validation using jQuery

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):

0 comments:

Post a Comment