输入框验证

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"/>

如上图所示，input="submit“位于弹出框内。这个“提交”按钮将触发对输入框的验证检查。

然而，现在我希望在弹出框出现之前触发验证。这意味着当输入按钮“type=”被触发时，我想要验证信息。

你知道我该怎么做吗？

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>