繁体   English   中英

如何验证复选框中具有多个名称的复选框(已使用BOOTSTRAP VALIDATOR)

[英]how to validate checkbox with multiple names in checkbox (BOOTSTRAP VALIDATOR USED)

您好这里是HTML代码,你可以看到它在输入不同的名字,我想,这样一个ATLEAST复选框的形式提交之前选择以验证此引导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'
                    }
                }
            }
        }
    })
$(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'
                    }
                }
            }
        }
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM