Microsoft's jQuery Validate Unobtrusive makes other validators skip validation

Question

I'm using unobtrusive validation in an MVC3 application. For one form, I need to do some pretty complex validation. Therefore, I figured I could use the regular jQuery validate plugin. When using a custom validation script and a reference to jQuery.validate.unobtrusive.js is included in the page, the custom validation scripts will always be valid!

Create an test html file (and include jquery.validate.js, jquery.unobtrusive-ajax.js, and jquery.validate.unobtrusive.js). When the following form is submitted, the validation checks won't be performed. Removing the script reference to jquery.validate.unobtrustive.js makes them work again. Is there a simple way around this?

<!DOCTYPE html>
<html>
<head>
    <title>Test Jquery</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript" src="jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            var result = $("#commentForm").validate({
                rules:
                {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    comment: "required"
                }

            });

        });
    </script>
</head>
<body>
    <form id="commentForm" method="get" action="">
    <fieldset>
        <legend>A simple comment form with submit validation and default messages</legend>
        <p>
            <label for="cname">Name</label>
            <em>*</em><input id="cname" name="name" size="25" />
        </p>
        <p>
            <label for="cemail">E-Mail</label>
            <em>*</em><input id="cemail" name="email" size="25" />
        </p>
        <p>
            <label for="ccomment">Your comment</label>
            <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </fieldset>
    </form>
</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

When using ASP.NET MVC 3 unobtrusive client side validation you shouldn't write custom rules as you did. Also it seems that you have included the jquery.validate.js script twice and the jquery.unobtrusive-ajax.js script is not necessary for client side validation. You should use DataAnnotations on your model to indicate validation rules and for more complex scenarios when you need custom rules you have the possibility to implement the IClientValidatable interface and attach custom adapters to the jquery validate plugin. You may take a look at the following answers which illustrate this concept: answer 1 and the followup answer 2.

edited May 23 '17 at 12:26

Community

1
1

answered Jan 28 '11 at 07:15

Darin Dimitrov

1,023,142
271
3,287
2,928

Yeah the 2nd include was a mistake in the sample. I will go the `IClientValidatable` route. Thanks. – TheCloudlessSky Jan 28 '11 at 11:21
Dear Darin, can i use IClientValidatable for checking a value against database? such as checking a name exists in the database with custom validation attribute? – Laurence Jun 27 '14 at 09:05

Microsoft's jQuery Validate Unobtrusive makes other validators skip validation

1 Answers1