Question

这是HTML和JavaScript代码：

     <html>
       <head>

        <style type="text/css">
            #bootstrapSelectForm .selectContainer .form-control-feedback {
                /* Adjust feedback icon position */
                   right: -15px;
                 }
          </style>
    <link href="css/bootstrap-select.min.css" rel="stylesheet"/>
    <script src="js/bootstrap-select.min.js" type="text/javascript"> </script>

</head>
<body>
    <form id="bootstrapSelectForm" method="post" class="form-horizontal">


        <div class="form-group">
            <label class="col-xs-3 control-label">Language</label>
            <div class="col-xs-5 selectContainer">
                <select name="language" class="form-control">
                    <option value=""></option>
                    <option value="arabic">Arabic</option>
                    <option value="english">English</option>
                    <option value="french">French</option>
                    <option value="german">German</option>
                    <option value="other">Other</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-5 col-xs-offset-3">
                <button type="submit" class="btn btn-default">Validate</button>
            </div>
        </div>
    </form>

这是JavaScript的代码：

    <script type="text/javascript">
        $(document).ready(function() {
      $('#bootstrapSelectForm')

          .find('[name="language"]')
        .selectpicker()
        .change(function(e) {
            // revalidate the language when it is changed
              $('#bootstrapSelectForm').formValidation('revalidateField', 'language');
            })
            .end()
         .formValidation({
           icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
        },
        excluded: ':disabled',
        fields: {


            language: {
                validators: {
                    notEmpty: {
                        message: 'Please select your native language.'
                    }
                }
            }
        }
    });
   });
         </script>
        </body>
    </html>

我无法进行验证。我已经完成了所有代码，但仍无法找到解决方案。

Answer 1

这是一个类似的例子，可以找到here

您需要导入名为formvalidation.js的包。它不是免于官方网站。如果需要，您可以购买包here

Answer 2

您的代码应如下所示。唯一缺少的是formvalidation.js插件，它不是免费的。

$(document).ready(function() {
    $('#bootstrapSelectForm')
        .find('[name="colors"]')
            .selectpicker()
            .change(function(e) {
                // revalidate the color when it is changed
                $('#bootstrapSelectForm').formValidation('revalidateField', 'colors');
            })
            .end()
        .find('[name="language"]')
            .selectpicker()
            .change(function(e) {
                // revalidate the language when it is changed
                $('#bootstrapSelectForm').formValidation('revalidateField', 'language');
            })
            .end()
        .formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                colors: {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 colors you like most',
                            callback: function(value, validator, $field) {
                                // Get the selected options
                                var options = validator.getFieldElements('colors').val();
                                return (options != null && options.length >= 2 && options.length <= 4);
                            }
                        }
                    }
                },
                language: {
                    validators: {
                        notEmpty: {
                            message: 'Please select your native language.'
                        }
                    }
                }
            }
        });
});

另一种选择（使用jquery.validate.js）：

JSFIDDLE

$(document).ready(function () {
    $('#bootstrapSelectForm').validate({
        rules: {
            language: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });
});

Bootstrap验证器 - 下拉列表

2 个答案: