如何使用Bootstrap data-toggle =“validator”但启用提交按钮

时间:2017-09-11 09:39:06

标签: javascript html twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap 3,我想验证一个表单只用data-toggle="validator"我想要启用提交按钮,并在单击提交时输入字段为空时警告用户。任何帮助都会非常有用!

以下是我的代码

的示例
 <form id="checkout" method="post" data-toggle="validator">
         <input class="form-control" type="text" required="required" 
         data-error="Please enter your name" placeholder="First name" />

         <button id="inputForm" type="submit" class="btn btn-prio-one">
                  <span>Submit</span>
         </button>
 </form

2 个答案:

答案 0 :(得分:2)

将属性data-disable="false"添加到表单标记,并启用Submit按钮。

<form id="checkout" method="post" data-toggle="validator" data-disable="false">

工作示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<form data-toggle="validator" role="form" data-disable="false">
    <div class="form-group">
        <label class="control-label" for="inputName">Name</label>
        <input class="form-control" data-error="Please enter your name" id="Name" placeholder="First Name" type="text" required />
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <button class="btn btn-primary" type="submit">
            Submit
        </button>
    </div>
</form>

答案 1 :(得分:0)

 <form id="checkout" method="post" data-toggle="validator">
         <input class="form-control" type="text" required="required" 
         data-error="Please enter your name" placeholder="First name" />

         <div class="help-block with-errors"></div>

         <button id="inputForm" type="submit" class="btn btn-prio-one">
                  <span>Submit</span>
         </button>
 </form>

试试这段代码。