Fatal编程技术网
  • javascript/
  • Javascript 引导选择选项验证不起作用

Javascript 引导选择选项验证不起作用

javascript jquery twitter-bootstrap

Javascript 引导选择选项验证不起作用,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,这是我的HTML和JavaScript代码 $（文档）.ready（函数（）{ $（'#staff_add'）。bootstrapValidator({ 消息：“此值无效”， 字段：{ 卖方：{ 验证器：{ 注意：{ 消息：“该字段为必填字段” } } }, 发票号码：{ 验证器：{ 注意：{ 消息：“该字段为必填字段” } } }, } }); }); --挑选-- 001 002 003 提交 将First选项的值设为空，否则它的值为--Select--，因此条件失败 <opt

这是我的HTML和JavaScript代码


$（文档）.ready（函数（）{
$（'#staff_add'）。bootstrapValidator({
消息：“此值无效”，
字段：{
卖方：{
验证器：{
注意：{
消息：“该字段为必填字段”
}
}
},
发票号码：{
验证器：{
注意：{
消息：“该字段为必填字段”
}
}
},
}
});
});


--挑选--
001
002
003
提交
将First选项的值设为空，否则它的值为--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>


BootstrapValidator演示
注册
--挑选--
001
002
003






提交
$（文档）.ready（函数（）{
$（'#staff_add'）。bootstrapValidator({
消息：“此值无效”，
字段：{
卖方：{
验证器：{
注意：{
消息：“该字段为必填字段”
}
}
},
发票号码：{
验证器：{
注意：{
消息：“Fieldsd是必需的”
}
}
},
}
});
});
将First选项的值设为空，否则它的值为--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>


BootstrapValidator演示
注册
--挑选--
001
002
003






提交
$（文档）.ready（函数（）{
$（'#staff_add'）。bootstrapValidator({
消息：“此值无效”，
字段：{
卖方：{
验证器：{
注意：{
消息：“该字段为必填字段”
}
}
},
发票号码：{
验证器：{
注意：{
消息：“Fieldsd是必需的”
}
}
},
}
});
});
您需要添加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;
        }
    });
});
您还需要为选项元素指定值属性

您需要添加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;
        }
    });
});
您还需要将值属性指定给选项元素

要将选项设置为“作为验证答案无效”，您应该禁用它：

<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>


--挑选--
001
002
003

要将选项设置为“作为验证答案无效”，应禁用该选项：

<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>


--挑选--
001
002
003


####应用值=”“它可以工作###
角色
-挑选-
医生

####Apply value=”“它可以工作###
角色
-挑选-
医生
您已将所需属性附加到“选择您还需要什么”？您已将所需属性附加到“选择您还需要什么”？我尝试使用上面修改的代码。检查是否附加了jquery和bootstrapValidator文件，但我想要selectpicker类它的实时搜索类我尝试了上面修改的代码它的工作方式。检查是否附加了jquery和bootstrapValidator文件，但我想要selectpicker类作为其live search类