HTML表单提交时未执行外部函数

HTML Form onsubmit not executing the external function

本文关键字：外部 函数 执行 表单提交 HTML      更新时间：2023-09-26

我有一个HTML表单，在提交时，要调用一个validate（）函数。

如果validate（）函数位于"body"标记末尾的"script"标记内，那么submit就可以正常工作。

否则，即使使用了document.ready，submit在外部js文件中也不会调用validate（）函数，如https://jsfiddle.net/vg47127o/1/

HTML--

<form method="post" action="#" onsubmit="return validate()" name="loginForm" class="form-horizontal" role="form">
<div class="form-group">
<p class="error-block"><span class="glyphicon glyphicon-exclamation-sign"> </span> <span class="error-msg"></span></p>
 </div>
<div class="form-group">
<label class="control-label col-sm-3" for="username">username:
</label>
<div class="col-sm-9">
  <input type="text" class="form-control digits-only" id="username" placeholder="Enter Username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">Password:</label>
<div class="col-sm-9">
  <input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
  <button type="submit" id="loginBtn" class="btn btn-default">Log In</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>

脚本--

    $(document).ready(function() {
  var displayError = function(error, msg) {
    $(".error-block .error-msg").text(msg);
    if (error === true)
      $(".error-block").show();
    else
      $(".error-block").hide();
    return true;
  };
  //Validating the input fields    
  var validate = function() {
    var $username = $("#username").val(),
      $password = $("#password").val();
    if ($username === '' || $password === '') {
      displayError(true, ' Username or Password cannot be empty. ');
      return false;
    } else if ($username.length < 6 || $password.length < 6) {
      displayError(true, ' Username and Password should be a minimum of 6 characters. ');
      return false;
    } else {
      displayError(false, ' ');
      return true;
    }
  };
});

我是不是遗漏了什么？或者是什么原因造成的。

这是一个正在运行的更新小提琴。如果validate没有返回true，则需要捕获submit（）事件。

这就是您将在jQuery:中包含的内容

$("form").on("submit", function (event) {
    if (!validate()) {
        event.preventDefault();
    }
});

那么你的<form>标签就是<form method="post" action="#" name="loginForm" class="form-horizontal" role="form">

FYI

原因是，当validate（）函数位于document-ready函数内部时，它的作用域是document-ready-函数，因此，内联DOM事件触发器无法访问它。您必须在jQuery函数内部设置事件处理程序，或者在document-ready-函数外声明validate（。

validate变量的作用域是您放入$(document).ready中的匿名函数。这意味着它只能从该函数中访问，而不能从全局范围内的页面访问。

使用$(...).submit函数添加事件侦听器：

$(document).ready(function() {
    /* *** */
    //Validating the input fields    
    $("[name=loginForm]").submit(function() {
        var $username = $("#username").val(),
            $password = $("#password").val();
        /* *** */
    });
});
相关文章：