integrate jquery validation engine with mvc3

I pretty new with MVC3 but i'm already learning how handle custom valida开发者_StackOverflow中文版tion, and client-server. But what happens if instead of using jquery-validate for the validations on client side I want to use another plugin called jquery-validation engine. How to start?

---

Well you start by turning off unobtrusive validation:

<appSettings>
    ...
    <add key="ClientValidationEnabled" value="false"/>
</appSettings>

and removing all references to jquery.validate.js and jquery.validate-unobtrusive.js scripts from your page. Then you read the documentation of the plugin you are willing to use, try out some of the demos, download the plugin, import required scripts to your page and you start attaching to your form elements. Don't expect miracles. There is nothing that will replicate your server side validation rules defined by data annotations on the client unless you write the code for yourself.

If you keep the ClientValidationEnabled parameter to true in your web.config the Html helpers will continue to emit HTML-5 data-* attributes that you could use to dynamically define your client validation rules based on the server validation rules (the same way jquery.validate-unobtrusive.js does it). So you could write your own jquery.validation-engine-unobtrusive.js file.

---

If you want to use jquery-validation engine take a look at Pieter's blog he's implemented a HTML Helper Extension method to use the data annotations in mvc with the jquery-validation engine.

---

get your js/css files all downloaded and added. what we have is a file called jquery.validationEngine-en.js which contains the rules for validation. for example

(function($) {
    $.fn.validationEngineLanguage = function() {};
    $.validationEngineLanguage = {
        debugMode: false,
        newLang: function() {
            $.validationEngineLanguage.allRules =   {
            "required":{
                "regex":"none",
                "alertText":"This field is required.",
                "alertTextCheckboxMultiple":"Please select an option.",
                "alertTextCheckboxe":"This checkbox is required."} };
                 },
                confirmInput: function(caller) {
            var confirmBox = $(caller).find('input.confirm_box');
            if (confirmBox.is(':checked')) {
                return false;
            } else {
                return true;
            }
        }
             };
})(jQuery);

$(document).ready(function() {  
    $.validationEngineLanguage.newLang();
});

For required, it shows the text to pop up in the tooltip when the validation fails for a required field. the function below is a custom validation function that will check to make sure the confirm box is checked before the submit can go through.

you use these by adding to the element a class like so:

<input type="checkbox" class="validate[required,custom[confirmInput]]" />

Or something like that