0

We have a validator that checks inputs and selects that is loaded as so:

$('form')
   .on('keyup', 'input[required], input.optional, select.required', validator.checkField)
   .on('change', 'select.required', validator.checkField);

The form is a multi part form, so there is a next button, which should only be enabled when all fields in the current display (called fieldsets) are validated.

Once an input is validated it adds a "good" class to the div. This is working, and on any keyup on an input or change on a select that is valid, the good class is added to the containing div.

The strange thing that is happening is, for all select's, you must change the select twice before the functioning enabling the next button recognizes all required fields have been validated.

We think it is because the counter for how many divs in the current set contain "good" class is firing just before it is finished adding to the dom. Any suggestions?

function enabler(input) {
    console.log("number of good classes required: "+input);
    //for testing:
    //alert(input);
    var v = this.value;
    var good;
    good = $("#f"+curFieldSet).find('.good');
    console.log("number of good classes found: "+good.length);
    if (good.length >= parseInt(input)){
         $('.next').prop('disabled', false);
    } else {
         $('.next').prop('disabled', true);
    }
}

enabler(4);

$(document).ready(function(){

    $('input[required]').not('.unused').keyup(function(){
         setTimeout(enabler(fieldSetNumber),500);
    }).change();

    $('select.required').not('.unsed').change(function(){
         setTimeout(enabler(fieldSetNumber),1000);

        if($(this).attr('id')=='account-type'){
            $('.section').hide();
            $('#' + $(this).val()).show(); 
        }
    }).change();

});
4

0 回答 0