JQuery Validate Group

by marhaba

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="frmSaveCustomCodes" method="POST">
<div id="inputs">

<div>
                                
<div style="margin-bottom: 2px;">
                                            <span><input id="Codes_0_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[0]" maxLength="5" value="" type="text" autocomplete="off"></span>
                                        
                                            <span><input id="Codes_1_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[1]" maxLength="5" value="" type="text" autocomplete="off"></span>
                                        
                                            <span><input id="Codes_2_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[2]" maxLength="5" value="" type="text" autocomplete="off"></span>
                                        
                                            <span><input id="Codes_3_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[3]" maxLength="5" value="" type="text" autocomplete="off"></span>
                                        
                                            <span><input id="Codes_4_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[4]" maxLength="5" value="" type="text" autocomplete="off"></span>
                                        
                                    </div>
                                
                                    <div style="margin-bottom: 2px;">
                                        
                                            <span><input id="Codes_5_" class="text60 avfaxcodes ValidateInput ValidateMin" title="must be a 5 character code" name="Codes[5]" maxLength="5"...

CSS

.text60{padding: 3px 3px;border: 1px double #C1C1C1;width:50px;}
.input-validation-error
{
    background-color:#f6d5d2;
    moz-background-origin-background-color: #f6d5d2;
    color:#ff0000;
}

JavaScript

$(function(){
    $('input:submit').button();
    SaveCustomCodes.ini();
    
});

var SaveCustomCodes= {
    ini : function(){
        this.validateForm();
    },
    validateForm: function() {
        $("#frmSaveCustomCodes").validate({
            ignoreTitle: true,
            debug:true,
            errorClass: "input-validation-error",
            //errorLabelContainer: "#ClientValidationContainer",
            groups: {
                locations: SaveCustomCodes.getLocationGroup()
            },
            errorPlacement: function(error, element) {
                //First we need to get the type of error
                //check of the error element is a location element
                if (SaveCustomCodes.groupElementInvalidLocation(element)) {
                    error.appendTo("#ClientValidationContainer");
                }
            }
        });

        $.validator.addMethod('ValidateInput', function () {
            return $('#inputs :text:filled').length > 0;
        }, 'At least one location must be entered');

        /*$.validator.addMethod('ValidateMin', function () {
            var filledCodes = $('#inputs :text:filled');
            if (filledCodes.length == 0) return true; 
            var returnVal = true;
            filledCodes.each(function (index, element) {
                if ($(element).val().length < 5) {
                    returnVal = false;
                }
            });
            return returnVal;
        }, 'Avfax codes must have a minimum of 5 characters.');    */

        $.validator.addMethod('ValidateMin', function () {
            var filledCodes = $('#inputs :text:filled');
            if (filledCodes.length == 0) return true;
            var returnVal = true;
            filledCodes.each(function (index, element) {
                if (!/^(([a-zA-Z0-9]{5}))$/.test($(element).val())) {
                    returnVal = false;
                }
            });
            return returnVal;
        }, 'Each Avfax code...