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

Question

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

我正在使用 Twitter BootStrap。

我posted this example在 jsFiddle 中。

也许只是 BootStrap 的标签问题，但我真的没看出问题所在。

Answer 1

3 件事:

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