表单未使用 BootStrap 验证必填字段

Question

我有一个提交的表单，其中必填字段为空。

我正在使用 Twitter BootStrap。

我posted this example 在jsFiddle。

也许只是 BootStrap 的一个标签问题，但我真的看不出有什么问题。

Answer 1

三件事：

1. 这不是您使用required 的方式。
2. 您需要将 jQuery 代码包装在 .ready() 中。
3. 将<button> 元素移动到<form> 中，使其变为type="submit"。

更新代码：

$(document).ready(function(){
    $(".action").click(()=>{
        $(".ajaxForm").submit();
    });
    $(".ajaxForm").submit(()=>false);
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="ajaxForm">
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group">
            <span class="input-group-addon">
                Nome
            </span>
            <input type="text" class="form-control nome" required />
        </div>
    </div>
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group">
            <span class="input-group-addon">
                CPF
            </span>
            <input type="text" class="form-control cpf" required />
        </div>
    </div>

    <button type="submit" class="action btn btn-success">Teste</button>
</form>

Updated jsFiddle

Answer 2

感谢您的回答。

由于我在表单之外有一个button（实际上是div）来触发提交，所以我通过（快速修复）触发隐藏提交按钮的点击找到了我的方式。

HTML：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group"> <span class="input-group-addon">
               Nome
           </span>
            <input type="text" class="form-control nome" required />
        </div>
    </div>
    <div class="container col-sm-6 col-xs-12">
        <div class="form-group input-group"> <span class="input-group-addon">
                CPF
            </span>
            <input type="text" class="form-control cpf" required />
        </div>
    </div>
    <input type="submit" style="display:none" /> <!-- The hidden button -->
</form>
<button class="action btn btn-success">Teste</button>

JavaScript：

$(".action").click(() = > {
    $(".ajaxForm input[type='submit']").click();
});
$(".ajaxForm").submit(() = > false);

所以，这个快速修复暂时可以使用。这是jsFiddle updated。