Question

我正在尝试检查输入框是否为空。

在提交信息之前，我有一个弹出框，确保我的用户真的想要创建内容。

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!— Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to add the exercise(s)?</p>

            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-default" value="Confirm"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<input type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Save All"/>

如上所示，输入=＆＃34;提交＆＃34;在弹出框内。这个＆＃34;提交＆＃34;按钮将触发输入框的验证检查。

但是现在我希望甚至在出现弹出框之前触发验证。这意味着我想在输入类型=＆＃34;按钮＆＃34;时验证信息。触发了。

知道我该怎么办吗？

Answer 1

您使用$("#fooForm").valid()手动验证，将（fooForm替换为您的表单ID）。

你可以挂进模态api来做到这一点;

$('#myModal').on('show.bs.modal', function (e) {

    if($("#myform").valid()){
        // the form is valid
    } else{
        // the form is invalid, stop the modal from being shown
        return e.preventDefault() // stops modal from being shown
    }

})

Answer 2

您可以尝试这种方法

<强> HTML

<input type="button" class="btn btn-default" onclick="function1();" data-toggle="modal" data-target="#myModal" value="Save All"/>

<强> JS 在function1()执行验证，如果一切正常，则返回true，否则返回false。

<script>
function function1()
    {
        console.log("This is called first");
        x=false;
        if(x)
        return true
        else
        return false;
    }


</script>

输入框验证

2 个答案: