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>

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

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

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

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

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

Answer 1

这似乎对我很好

＆＃13;

$("#signup-submit-button").click(signup);

var signup = () => {
    // make a web socket call
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<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" id="signup-submit-button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </form>

＆＃13;

Answer 2

在表单标记内使用 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>

Answer 3

你可以这样做：

$("#signup-submit-button").click(function() {
  signup(function() {
    alert("callback is called")
  })
});

function signup(callback) {
  alert("function before callback")
  callback();
}

这将首先在function signup内部运行代码，然后在

之后触发回调

<强>演示

＆＃13;

$("#signup-submit-button").click(function() {
  signup(function() {
    alert("callback is called")
  })
});

function signup(callback) {
  alert("function before callback")
  callback();
}

＆＃13;

<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" id="signup-submit-button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>

＆＃13;

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

3 个答案: