Remote validation using jQuery Validate

This is how jQuery validate is done in ASP.NET MVC

Markup

<form id="manager-form" action="">
    <p>
        <label style="display:inline-block; width: 200px;">Manager Name</label>
        <input type="text" id="Manager" name="Manager" />
    </p>
    <p>
        <input type="submit" id="saveManager" class="btn btn-primary" value="Save Sales Person" />
    </p>
</form>

JavaScript

    function SetValidationRules(){
        $("#manager-form").validate({
            onkeyup: false,
            rules: {
                Manager: {
                    required: true,
                    minlength: 3,
                    remote: {
                        url: '/Manager/IsManagerNameTaken',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            managerName: function () {
                                return $('#Manager').val();
                            }
                        }
                    }
                }
            },
            messages: {
                Manager: {
                    required: "Manager name is required.",
                    minlength: "Manager name should be 3 atleast characters."
                }
            }
        });
    }

Controller

    public ActionResult IsManagerNameTaken(string managerName)
    {
        var result = ManagerRepository.IsManagerNameTaken(managerName) ?
            "Manager name is already taken. Try another!" : "";
        return Json(result);
    }

Thats all to it. Happy coding!

Related Posts :