Question

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

我正在使用Twitter BootStrap。

jsFiddle中的posted this example。

可能只是BootStrap中的标签问题，但我真的没有看到错误。

Answer 1

3件事：

这不是您使用required的方式。
您需要将jQuery代码包装在.ready()。
将<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。

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

2 个答案: