cookbook: jQuery global validator

declarativeValidator.js

var declarativeValidator = function () {

    var dictionary = {};            // dictionary of form names and their submitHandlers

    var init = function () {

        initForms();
    }
    
    var initForms = function () {

        var formsToValidate = $('[data-val-enabled="true"]');
        formsToValidate.each(function () {

            var $form = $(this);
            var isAjaxForm = $form.attr('data-form-ajax');
            if (isAjaxForm === "") {
                var formName = $form.attr('name');
                var ajaxFormSubmitHandler = dictionary[formName];
                $form.validate({
                    submitHandler: ajaxFormSubmitHandler
                })
            } else {
                $form.validate();
            }

            initRequired($form);
            initDigits($form);
            initEqualTo($form);
            initEmail($form);
            initExactLength($form);
            initRemoteVal($form);
            initRegnum($form);
        });
    }

    var initRegnum = function ($form) {
        
        var regnumInputs = $form.find('[data-val-regnum]');
        regnumInputs.each(function(){

            var regnumMessage = $(this).attr('data-val-regnum-mssg');

            $(this).rules('add', {
                'regnum': true,
                'messages': {
                    'regnum': regnumMessage
                }
            })
        })
    }

    var initDigits = function ($form) {
        
        var digitInputs = $form.find('[data-val-digits]');
        digitInputs.each(function () {

            var digitsMessage = $(this).attr('data-val-digits-mssg');

            $(this).rules('add', {
                'digits': true,
                'messages': {
                    'digits': digitsMessage
                }
            })
        });
    }

    var initRequired = function ($form) {

        var requiredInputs = $form.find('[data-val-required]');
        requiredInputs.each(function () {

            var requiredMessage = $(this).attr('data-val-required-mssg');

            $(this).rules('add', {
                'required': true,
                'messages': {
                    'required': requiredMessage
                }
            });
        });
    }

    var initEqualTo = function ($form) {

        var equalToInputs = $form.find('[data-val-equalto]');
        equalToInputs.each(function () {

            var equalToMessage = $(this).attr('data-val-equalto-mssg');
            var equalToTarget = $(this).attr('data-val-equalto-target');

            $(this).rules('add', {
                'equalTo': equalToTarget,
                'messages': {
                    'equalTo': equalToMessage
                }
            });
        });
    }

    var initEmail = function ($form) {

        var emailInputs = $form.find('[data-val-email]');
        emailInputs.each(function () {

            var emailMessage = $(this).attr('data-val-email-mssg');

            $(this).rules('add', {
                'email': true,
                'messages': {
                    'email': emailMessage
                }
            });
        });
    }

    var initExactLength = function ($form) {

        var exactLengthInputs = $form.find('[data-val-exactlength]');
        exactLengthInputs.each(function () {

            var exactLengthMessage = $(this).attr('data-val-exactlength-mssg');
            var exactLengthValue = parseInt($(this).attr('data-val-exactlength-value'));

            $(this).rules('add', {
                'exactlength': exactLengthValue,
                'messages': {
                    'exactlength': exactLengthMessage
                }
            });
        });
    }

    var initRemoteVal = function ($form) {
        
        var remoteValInputs = $form.find('[data-val-remote]');
        remoteValInputs.each(function(){

            var remoteValInputMessage = $(this).attr('data-val-remote-mssg');
            var remoteValInputUrl = $(this).attr('data-val-remote-url');
            var element = $(this);

            $(this).rules('add', {
                'remote': {
                    url: remoteValInputUrl,
                    type: "post",
                    data: {
                        valueToValidate: function () {
                            return element.val();
                        }
                    }
                },
                'messages': {
                    'remote': remoteValInputMessage
                }
            })
        })
    }

    var addFormSubmitHandler = function(formName, formSubmitHandler){
        dictionary[formName] = formSubmitHandler;
    }

    return {
        init: init,
        addFormSubmitHandler: addFormSubmitHandler
    }
}();

globalValidator.js

var globalValidator = function () {

    var setupGlobalValidator = function () {
        jQuery.validator.setDefaults({
            errorClass: 'has-error',
            validClass: 'has-success',
            errorPlacement: function (error, element) {

                var errorText = error.text();

                var elementFormGroup = $(element).closest('.form-group');
                $(elementFormGroup).popover('destroy')
                $(elementFormGroup).popover({
                    content: errorText,
                    container: 'body',
                    template: '<div class="popover" style="border:0;padding:0"><h3 class="popover-title"></h3><div class="popover-content alert alert-danger" style="margin:0;max-width:550px;"></div></div>'
                })
                $(elementFormGroup).popover('show')
            },
            highlight: function (element, errorClass, validClass) {
                $(element).closest('.form-group').removeClass(validClass).addClass(errorClass);  // add the Bootstrap error class to the control group                
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).closest('.form-group').removeClass(errorClass).addClass(validClass);  // remove the Boostrap error class from the control group

                var elementName = element.name;
                var elementFormGroup = $('[name="' + elementName + '"]').closest('.form-group');
                $(elementFormGroup).popover('hide')
            }
        });
    }

    var init = function () {
        setupGlobalValidator();
    }

    return {
        init: init
    }

}();

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Swazza Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <!-- End Bootstrap -->

    <style>
        .top-buffer-100 {
            margin-top: 75px;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container top-buffer-100">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form id="frmRegister" data-val-enabled="true">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Username</span>
                            <input type="text" class="form-control" name="username" placeholder="Please enter your user name"
                                data-val-required data-val-required-mssg="Username is required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Password</span>
                            <input type="text" class="form-control" name="pwd" id="pwd" placeholder="Please enter a password"
                                data-val-required data-val-required-mssg="Password is required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Confirm Password</span>
                            <input type="text" class="form-control" name="cnfmPwd" placeholder="Please repeat the password"
                                data-val-required data-val-required-mssg="Please confirm your password"
                                data-val-equalto data-val-equalto-target="#pwd" data-val-equalto-mssg="Passwords do not match" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Email</span>
                            <input type="text" class="form-control" name="email" placeholder="Please enter your email"
                                data-val-required data-val-required-mssg="Email is required"
                                data-val-email data-val-email-mssg="Please enter a valid email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Mobile</span>
                            <input type="text" class="form-control" name="phone" placeholder="Please enter 10 digit mobile number"
                                data-val-required data-val-required-mssg="Mobile is required"
                                data-val-exactlength data-val-exactlength-value="10" data-val-exactlength-mssg="Please enter 10 digits exactly" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group pull-right">
                            <input type="submit" class="btn btn-success" value="Submit" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Jquery and Bootstrap -->
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <!-- End Jquery and Bootstrap -->

    <!-- Helper Scripts -->
    <script src="/Scripts/declarativeValidator.js"></script>
    <script src="/Scripts/globalValidator.js"></script>
    <!-- End Helper Scripts -->

    <!-- Initialization -->
    <script>
        $(function () {
            globalValidator.init();
            declarativeValidator.init();
        });
    </script>

</body>
</html>