javascript - 如何在 Bootstrap 中的提交按钮上设置回调函数？

Question

我使用 bootstrap 模态对话框作为用户注册表单，如下所示:

<form>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="user-name-input">User Name</label>
                            <input type="text" class="form-control" id="user-name-input" placeholder="User Name" required>
                        </div>
                        <div class="form-group">
                            <label for="user-email-input">Email address</label>
                            <input type="email" class="form-control" id="user-email-input" aria-describedby="emailHelp" placeholder="Enter email" required>
                        </div>
                        <div class="form-group">
                            <label for="userPasswordInput">Password</label>
                            <input type="password" class="form-control" id="user-password-input" placeholder="Password">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" id="signup-submit-button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </form>

它工作正常，我想为提交按钮添加回调函数。我需要在该回调上调用网络套接字请求。如果我这样做如下:

$("#signup-submit-button").click(signup);

const signup = () => {
    // make a web socket call
}

可以调用回调函数 signup 但所有表单输入验证都不起作用。表单中的每个 input 都有一个 required 属性。如果我将此留空，则应触发 Bootstrap 验证以验证表单值。

如何在通过验证检查后添加回调？

Answer 1

在表单标签内使用 onsubmit 事件。这将允许在执行 signup() 函数之前检查验证规则。请注意，如果您想禁止验证，那么您也可以将 novalidate 属性添加到表单标签中。

function signup() {

}

<form onsubmit="signup()">
      ...      
</form>

更新:工作解决方案

$('#signup-submit-button').on('click', function() {   $(this).parents('form:first').find('.hiddenButton').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="signupModalLabel">Sign Up</h3>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="user-name-input">User Name</label>
                            <input type="text" class="form-control" id="user-name-input" placeholder="User Name" required>
                        </div>
                        <div class="form-group">
                            <label for="user-email-input">Email address</label>
                            <input type="email" class="form-control" id="user-email-input" aria-describedby="emailHelp" placeholder="Enter email" required>
                        </div>
                        <div class="form-group">
                            <label for="userPasswordInput">Password</label>
                            <input type="password" class="form-control" id="user-password-input" placeholder="Password">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="hiddenButton" style="display:none"></button>
                        <button type="button" id="signup-submit-button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </form>