Question

这是我的HTML和JavaScript代码

<script src = "../js/jquery.min.js"></script>
<script src="../js / formvalidation / bootstrapValidator.min.js"></script>
<script type="text / javascript">
$(document).ready(function() {
    $('#staff_add').bootstrapValidator({
            message: 'This value is not valid',
                
            fields: {
                vender: {
                    validators: {
                        notEmpty: {
                            message: 'The Field is required'
                        }
                    }
                },
                invoicenumber: {
                    validators: {
                        notEmpty: {
                            message: 'The Field is required'
                        }
                    }
                },
    
            }
        });
    });
</script>

<form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off">
  <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
    <option>--Select--</option>
    <option>001</option>
    <option>002</option>
    <option>003</option>
  </select>
  <input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" />
  <button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>

选择框验证无效，文本框验证工作正常。
我删除了选择框类selectpicker验证工作，但是将selectpicker类放入其中不起作用

Answer 1

将第一个选项值设为空，否则它的值为--Select--因此条件失败。

<option value="">--Select--</option>

修饰

<!DOCTYPE html>
<html>
<head>
    <title>BootstrapValidator demo</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="page-header">
                        <h2>Sign up</h2>
                    </div>

                    <form id="staff_add" method="post" class="form-horizontal" action="target.php">

                    <select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<br><br>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/>
<br><br>
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>


                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>
  <script>
     $(document).ready(function() {
    $('#staff_add').bootstrapValidator({
        message: 'This value is not valid',

        fields: {
            vender: {
                validators: {
                    notEmpty: {
                        message: 'The Field is required'
                    }
                }
            },
            invoicenumber: {
                validators: {
                    notEmpty: {
                        message: 'The Fieldsd is required'
                    }
                }
            },

        }
    });
});

     </script>

    </body>
</html>

Answer 2

您需要添加submitHandler

 $(document).ready(function() {
    $('#staff_add').bootstrapValidator({
        message: 'This value is not valid',
        fields: {
            vender: {
                validators: {
                    notEmpty: {
                        message: 'The Field is required'
                    }
                }
            },
            invoicenumber: {
                validators: {
                    notEmpty: {
                        message: 'The Field is required'
                    }
                }
            },

        }
         submitHandler: function (validator, form, submitButton) {
            return false;
        }
    });
});

您还需要为选项元素

指定值属性

Answer 3

用于将选项设置为＆＃34;无效作为验证答案＆＃34;你应该禁用它：

<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option disabled="disabled">--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>

Answer 4

####    Apply value="" it works.###
    
    <label>Role</label> 
    <select class="form-control" id="roleId" required>
            <option value="">-Select-</option>
            <option value="1">Doctor</option>
    </select>

Bootstrap选择选项验证不起作用

4 个答案: