Jquery 验证插件不适用于动态生成的复选框

Question

大家好，我正在使用 Jquery validation plugin，我必须创建一个表单，该表单具有动态生成的字段，例如输入框、select 框和复选框，因此它可以完美地用于我表单的其他元素，但不适用于动态生成的复选框

查看下面的快照

为此，我的 jquery 验证码是

var educationFormValidator = $("#educationForm").validate({
rules:function(){
    var primaryEducationRules = new Object();
    $('.is_primary').each(function() {
        primaryEducationRules[this.name] = {
            require_from_group: [1, ".is_primary"],
            required:true
        };
    });
    console.log(primaryEducationRules);
    return primaryEducationRules;
},
messages:function(){
    var messages = new Object();
    $('.is_primary').each(function() {
        messages[this.name] = { required: 'Please select relevant qualification' };
    });
    console.log(messages);
    return messages;
},
submitHandler: function(form) {
    form.submit();
},
invalidHandler: function() {
    console.log( educationFormValidator.numberOfInvalids() + " field(s) are invalid" );
}
});

javascript 生成动态复选框的函数

function addEducation (educationCount) {
var educationDiv = '<div class="inputRow_'+educationCount+'"><hr><br>';
educationDiv += addInstituteNameDiv (educationCount);
educationDiv += addBatchYears (educationCount);
educationDiv += addCourseType (educationCount);
educationDiv += addDegreeTypeDiv (educationCount);
educationDiv += addAddDegreeButton (educationCount);
educationDiv += '</div>';
$('.multiple-education').append(educationDiv);
//addYearsInOption(educationCount);
if(educationCount!=1){
    $('#deleteDegreeBtn_'+(parseInt(educationCount)-1)).css("display","block");
    $('#deleteDegreeBtn_'+educationCount).css("display","block");
}

$('#addDegreeBtn_'+      (parseInt(educationCount)-1)).css("display","none");
}

function addInstituteNameDiv (educationCount) {
var instituteNameDiv = '<div class="form-group" id="instituteName'+educationCount+'">';
instituteNameDiv +=   '<label style="padding-left:0;" class="col-md-2 col-sm-2 control-label" for="textinput">Institute</label>';
instituteNameDiv +=    '<div class="col-md-6 col-sm-6">';
instituteNameDiv +=        '<input name="From['+educationCount+'][otherInstitute]" class="form-control input-md" type="text" required id="instituteName_'+educationCount+'">';
instituteNameDiv +=        '</div>';
instituteNameDiv +=        '<!--<div class="col-md-1 col-sm-2"><span name="reset_'+educationCount+'" id="reset_institute_'+educationCount+'" class="suggestion-reset greentxt mt7 pull-left">Edit</span></div>-->';
instituteNameDiv +=        '<div class="checkbox col-md-3 col-sm-2 pdl0 col-xs-12 edu-message">';
instituteNameDiv +=            '<label style="padding-left:0;" for="checkboxes-0">';
instituteNameDiv +=                '<input class="is_primary" name="From['+educationCount+'][is_primary]" id="is_primary_'+educationCount+'" value="1" type="checkbox" onclick="setImportantEducation('+educationCount+')">';
instituteNameDiv +=                '<span name="primary_edu_'+educationCount+'" id="primary_edu_'+educationCount+'">This is my most relevant / important educational qualification</span>';
instituteNameDiv +=            '</label>';
instituteNameDiv +=        '</div>';
instituteNameDiv +=    '</div>';
return instituteNameDiv;
}

如果生成，所有字段在表格中都是必填的，但用户必须 select 从许多教育领域中至少选择 1 个相关教育

为了帮助，我也阅读了 this link

Answer 1

您没有在脚本中调用 addInstituteNameDiv()。此外，addInstituteNameDiv() 应该出现在验证器调用之前。

Answer 2

尝试

jQuery.validator.addMethod("isprimary", function (value, element) {
    return $('.is_primary:checked').length == 1;
}, "Please select 1");

$.validator.addClassRules("is_primary", {
    isprimary: true
});

var educationFormValidator = $("#educationForm").validate({
    submitHandler: function (form) {
        form.submit();
    },
    invalidHandler: function () {
        console.log(educationFormValidator.numberOfInvalids() + " field(s) are invalid");
    },
    errorPlacement: function (label, element) {
        if (element.hasClass('is_primary')) {
            element.parent().append(label)
        } else {
            label.insertAfter(element);
        }
    }
});

演示：Fiddle

Answer 3

有效，但是，它包含一些不必要的代码。

消除.addClassRules():

您不需要 .addClassRules() 方法来简单地使用 class 应用自定义规则。 .addClassRules() 方法用于创建 "compound" 规则，此处并非如此。

如果您出于某种原因想要创建自定义规则，则可以直接应用自定义规则作为class。不需要 .addClassRules().

<input class="my_custom_rule" ...

演示：http://jsfiddle.net/m52ga6ex/12/

Jquery 验证插件不适用于动态生成的复选框

Jquery validation plugin not working on dynamic generated checkboxes

javascript

jquery

jquery-validate