Question

您好，这里有html代码，因为您可以看到它在输入中有不同的名称，我想验证此引导程序js，以便在表单提交之前必须选择至少一个复选框。下面将是我用于单选按钮的javascript，因为它们具有相同的名称。谢谢 `

<div class="form-group required">
                    <label class="col-md-2 control-label" required>Q2. Which event did you attend?</label>
                    <div class="col-md-4">
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Mel" value="true" />Melbourne</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Syd" value="true" />Sydney</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Bri" value="true" />Brisbane</label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input class="validateCheck" type="checkbox" name="Event_Gol" value="true" />Gold Coast</label>
                        </div>
                    </div>
                </div>`
$(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        fields: {

            comment: {
                validators: {
                    stringLength: {
                        min: 5,
                        max: 200,
                        message: 'Please enter at least 5 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply your description'
                    }
                }
            },
            RateLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            LikelyLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            EventLog: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            },
            AdditionalFeed: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your feedback'
                    }
                }
            },
            ProductTrial: {
                validators: {
                    notEmpty: {
                        message: 'Please select a value'
                    }
                }
            }
        }
    })

Answer 1

$(document).ready(function() {
$('#contact_form')
    .on('init.field.fv', function(e, data) {
        // data.field   --> The field name
        // data.element --> The field element
        if (data.field === 'checkEvents') {
            var $parent = data.element.parents('.form-group'),
                $icon   = data.element.data('fv.icon');
            $icon.appendTo('#feedbackIcon');  // <--- Move the icon to this element
        }
    })
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            validateCheck: {
                selector: '.validateCheck',
                err: '#message',      // <---- All messages of checkEvents will be placed inside this element
                validators: {
                    notEmpty: {
                        message: 'Please choose at least one checkbox'
                    }
                }
            }
        }
    });
});

如何在复选框中使用多个名称验证复选框（BOOTSTRAP VALIDATOR USED）

1 个答案: