using asp.net mvc3 with jquery.validate.unobtrusive.js to validate form and changebutton

Question

I am working with mvc3 and use model validation like this:

    public class ColumnVM {
    [Required(ErrorMessage = "Required")]
    public string Name { get; set; }}

I want to do clientside validation with model validation. My html is :

@using(Html.BeginForm("AddColumn","Column",FormMethod.Post))
@html.TextBoxFor(model=>model.Name)
@Html.ValidationMessageFor(model=>model.Name)
<input type="submit" value="submit" style="background-color:blue">

I want to do the client validation before submit.If the submit is valid,the submitbutton change its color and disbled itself calling: function changeBtnColor(obj) { obj.css("background-color", "#A9A9A9"); obj.attr("disabled", "disabled"); } function changeBtnColor(obj) { obj.css("background-color", "#A9A9A9"); obj.attr("disabled", "disabled"); } function changeBtnColor(obj) { obj.css("background-color", "#A9A9A9"); obj.attr("disabled", "disabled"); } If not,do not change its color and do not disable,and show validation error message. When jquery.validate.unobtrusive.js is in,I cannot use $("form").validate() any more. How can I do this task?

Answer 1

Include this script after the jquery, jquery validate and jquery validate unobtrusive scripts

<script>
    $(function () {
        $("form").validate().settings.submitHandler = function (form) {
            alert('valid form');
            // do your stuff here
            form.submit();
        }
    });
</script>