Question

这是我的代码：

    <form>   
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa-10x"></i></span>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required="required">     
            </div>
        <br/>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-key fa-10x"></i></span>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required="required">    
            </div> 
        <br/>
        <button type="button" class="btn btn-default">Submit</button>
    </form>

如果我更改required="required"，

button type = "submit"正在运作，但我只想使用button type = "button"，因为我想使用AJAX提交表单。如何使用button type = "button"？

使用必填字段

Answer 1

理解这个概念，button不接受其中的任何用户值，因此您无法对其进行required字段验证。相反，您可以在required，email字段上进行password验证。在按钮上单击这些字段，检查它们是否具有某些值。如果不是，则显示错误。

这可以通过使用jquery validation来实现：

$("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5
            },
            "email": {
                required: true,
                email: true
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "email": {
                required: "Please, enter an email",
                email: "Email is invalid"
            }
        }
    });

Working fildle

Another Fiddle

Answer 2

为什么不尝试使用标准类型按钮＆＃34;提交＆＃34;并分配给表格的事件＆＃34;提交＆＃34;处理程序，首先调用event.preventDefault()，以阻止表单发送，然后调用AJAX。

Answer 3

When submit a form we can check validation.But if you want to use 
type='button' then please call a javascript function to check validation.
foe example:

$('#btn').on('click', function() {
   $("#form1").valid();
});

jsFiddle Demo

Answer 4

您无法对CallToAction字段/按钮进行验证。您可以验证用户必须填写某些数据的输入字段。

此外，没有必要为required字段分配required值。您只需撰写<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required/>

Answer 5

在此处详细检查bootstrap验证（版本3.2及更高版本）：http://bootstrapvalidator.votintsev.ru

如何在“按钮”类型上使用Bootstrap必填字段而不是提交？

5 个答案: