Question

嘿伙计们我正在使用Jquery validation plugin，我必须创建一个具有动态生成字段的表单，如输入框，选择框和复选框，以便它在我的表单的其他元素上完美运行，但不适用于动态生成的复选框

查看下面的快照 enter image description here

我的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;
}

如果生成字段，则所有字段都是必填字段，但用户必须从许多教育字段中选择至少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

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

消除.addClassRules()：

您只需使用.addClassRules()方法简单地使用类应用自定义规则。 .addClassRules()方法用于创建＆＃34;化合物＆＃34;规则，这不是这种情况。

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

<input class="my_custom_rule" ...

DEMO：http://jsfiddle.net/m52ga6ex/12/

Jquery验证插件不能处理动态生成的复选框

3 个答案: