Posted by: nyshangal April 19, 2010
form validation..
Login in to Rate this Post:     0       ?        
i need a help with form validation..my company is using a custom group validator ,  two fields first name and last name should have minimum of 2 chars..and the error message should be displayed only when the check box is clicked or when a user enters any character in address field.. my problem is even if i have 2 chars in my first name and last name..the error message is still displayed..(but it does not show error if the flow is continuous, meaning if i enter first name first and last name after that).i want to get rid of those error message..below is the code they have used

(function($){
    var stepForm = $('#page-container #registryForm,
#page-container #regForm'),
        inputSet = stepForm.find(':input,
select');

    if (!stepForm.length) return;
    //Pass / fail event for form
   
stepForm.data('
validationHandler', {
        pass: function () {
           
inputSet.filter('[name*=phone]').each(function () {

                this.value = this.value.replace(/[^\d+]/g, "");
           
});           
        },
        fail: function() {
           
$('#regSubmitE1').show();           
        }

    });

    //Validator for step2 field groups; ensures that name
is required when other fields are not blank.
    function
groupValidator() {
        var set = $(this).attr('name').replace(/^([^A-Z]*)[A-Z].*$/,
'$1'),

            ok = true,
            thisSet =
dependents.filter('[name^='+set+']').each(function () {
               
ok = ok && $(this).val().trim().isBlank();
           
});
       

        if (ok) return true;
        ok=true;
       
$(':input[name='+set+'GivenName], :input[name='+set+'FamilyName]').each(function
() {
            ok = ok && $(this).val().trim().length
>= 2;

        });
        return ok;
    }
    //Match '!' to fields
that have errors only
    var fields = $('form div.regFieldBox'),
       
formErrors = $('div.regFormError div'),
        formError =
$('div.regFormErrorBottom1, div.regFormErrorBottom2'),

        run = null;
   
    function matchBangs() {
       
//Prevent rerunning this indicator bunches of times.
        if (run
!= null) clearTimeout(run);
        run = setTimeout(function () {
           
run=null;

            var set1=fields.find('div.regFormError2');
           
var set2=fields.filter(':has(div.regFormError
div:visible)').find('div.regFormError2');
           
set1.hide(); set2.show();

            formError[formErrors.filter(':visible').length?'show':'hide']();
       
}, 125);
    }
    //Main pass/fail event for ALL inputs
   
var genericHandler = {
            fail: function (errorClass) {

                var jEl = $(this);
               
jEl.parents('.regFieldBox:first')
                   
.find('.regFormError')
                    .children()
                   
.hide()
                    .filter('.'+errorClass)

                    .show();
                if
(errorClass.substr(0,6) == 'equals') {
                    var elEq =
$(this).data('equalsSelector');
                    if (elEq) {
                       
var jEq = $(elEq);

                        jEq.parents('.regFieldBox:first')
                           
.find('.regFormError')
                            .children()
                           
.hide()
                            .filter('.'+errorClass+'.'+jEl.attr('id'))

                            .show();
                    }
               
}
                if (errorClass = 'custom') $('div.regFormError
div.custom.'+this.id).show().find('.regFormError:first').show();

                matchBangs();
            },
            pass:
function (errorClass) {
                var jEl = $(this);
               
jEl.parents('.regFieldBox:first')
                   
.find('.regFormError .'+errorClass)

                    .hide();
                if
(errorClass.substr(0,6) == 'equals') {
                    var elEq =
$(this).data('equalsSelector');
                    if (elEq) {
                       
var jEq = $(elEq);

                        jEq.parents('.regFieldBox:first')
                           
.find('.regFormError .'+errorClass)
                           
.hide();
                    }
                }

                if (errorClass = 'custom') $('div.regFormError
div.custom.'+this.id).hide();
               
matchBangs();
            }
        },
        dependents =
$(':input.nameDependency');

       
    //Let the generic handler handle all inputs
   
inputSet.data('validationHandler', genericHandler);
    //Tie up
group validation
    inputSet.filter(':input.nameDependency,
:input[name$=GivenName]').data('customValidator', groupValidator);

    //Custom validator for last names - must be present if first name or
any dependent data is present.
    inputSet.filter(':input[name$=FamilyName]').data('customValidator',
function () {
        var id = this.id.replace('LName', 'fName');

        return ($('#'+id).val().trim().isBlank() ||
$(this).val().trim().length >= 2) &&
groupValidator.apply(this, arguments);
    });
   
   
//Confiugration for various form elements
       
inputSet.filter('#regFName, #regLName, #regCoFName, #regCoLName,
#regGP1FName,#regGP1LName, #regGP2FName,#regGP2LName').data('minLength',
2);

    inputSet.filter('#regEmail').data('equalsSelector','#regEmail2');
   
inputSet.filter('#regEmail2').data('equalsSelector','#regEmail');
   
inputSet.filter('#regPass').data('minLength',6).data('equalsSelector','#regPass2');

    inputSet.filter('#regPass2').data('minLength',6).data('equalsSelector','#regPass');
   
inputSet.filter('#regZip, [id*="postal"]').data('minLength',5);

hope to get the best help

thanks in advance


Read Full Discussion Thread for this article