Question

尝试通过jQuery get请求验证表单输入，但未调用函数。

仅使用jQuery（不带函数）进行尝试，$ .get起作用并返回正确的值。如果条件不满足，我需要函数方法返回false（并停止提交表单）。

<form onSubmit="return checkName();" action="/register" method="post">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
    function checkName() {
        $(document).ready(function () {
            $("button").click(function () {
                $.get("/check?username=" + document.getElementById('1').value, function (data, status) {
                    alert(data);
                    return false;
                });
            });
        });
    }
</script>

我希望函数会被调用，如果输入经过验证（返回并继续提交表单），则返回true；如果验证失败，则返回false（停止提交表单）。

Answer 1

您需要从函数中返回而不是从回调内部返回，并且如果您分配给onsubmit则不需要单击处理程序，则可以执行一次。而且，如果您对表单执行操作，则点击处理程序将无法正常工作。

您需要这个：

function checkName() {
  $.get("/check?username=" + document.getElementById('1').value, function(data, status){
    alert(data);
  });
  return false;
}

这是基本代码，如果您想在数据为假的情况下提交表单，则db中没有用户，那么您需要这样的东西（这样做可能是更好的方法：

var valid = false;
function checkName() {
   if (valid) { // if valid is true it mean that we submited second time
      return;
   }
   $.get("/check?username=" + document.getElementById('1').value, function(data, status){
      if (data) { // we check value (it need to be json/boolean, if it's
                  // string it will be true, even string "false")
         valid = true;
         $('form').submit(); // resubmit the form
      }
   });
   return valid;
}

Answer 2

您要从异步处理程序函数返回false。因此，这不会阻止表单的发送。

更好的解决方案是始终阻止提交表单，然后根据您的AJAX请求的结果手动提交表单。

还请注意，分配无干扰的事件处理程序是更好的做法。当您使用jQuery时，这是一项琐碎的任务。这也使您可以访问由表单提交引发的Event对象，以取消该对象。试试这个：

<form action="/register" method="post" id="yourForm">
  <div class="form-group">
    <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
  </div>
  <div class="form-group">
    <input class="form-control" name="password" placeholder="Password" type="password">
  </div>
  <div class="form-group">
    <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
  </div>
  <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

$(document).ready(function() {
  $("#yourForm").on('submit', function(e) {
    e.preventDefault();
    var _form = this;
    $.get('/check', { username: $('#1').val() }, function(data, status) {
      // interrogate result here and allow the form submission or show an error as required:
      if (data.isValid) { // just an example property, change as needed
        _form.submit();
      } else {
        alert("Invalid username");
      }
    });
  });
});

Answer 3

不再存在将事件放入html中的习惯，因为有addEventListener。您可以直接从javascript中添加它：

document.querySelector('form').addEventListener('submit', checkName)

这使代码导航更容易，并且更易于阅读。

然后，我们可以通过将第一个参数传递给函数，然后调用.preventDefault()来阻止表单表单执行其默认操作，正如您从下面的修改函数中看到的那样。因此，我们不再需要return false。

document.querySelector('form').addEventListener('submit', checkName)

function checkName(e) {
  e.preventDefault()
  $.get("/check?username=" + document.getElementById('1').value, function(data, status) {
    alert(data);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/register" method="post">
  <div class="form-group">
    <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
  </div>
  <div class="form-group">
    <input class="form-control" name="password" placeholder="Password" type="password">
  </div>
  <div class="form-group">
    <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
  </div>
  <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

Answer 4

如果所有字段都不能空白，则可以将其标记为必填项。对于您的功能，您可以使用以下对我有用的格式。

function checkName() {
  var name = $("#1").val();
  if ('check condition for name which should return true') {} else {
    return false;
  }
  return true;
}

Answer 5

只需编写函数名称，后跟（）。无需在onsubmit函数调用中编写返回

            function checkName()
            {
                $(document).ready(function(){
                    $("button").click(function(){
                        $.get("/check?username=" + document.getElementById('1').value, function(data, status){
                            alert(data);
                            return false;
        });
      });
    });
            }

<form onSubmit="checkName();" action="/register" method="post">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

Answer 6

您应该删除document.ready，然后单击按钮事件。

已编辑

将事件参数添加到checkName：

<form onSubmit="return checkName(event);" action="/register" method="post" id="myForm">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
     function checkName(e){
         e.preventDefault();
         e.returnValue = false;
         $.get("/check?username=" + document.getElementById('1').value,
           function(data, status){
           if(data) // here you check if the data is ok 
             document.getElementById('myForm').submit();
           else
            return false;
        });}

</script>

Answer 7

我认为，如果您将按钮类型从“提交”替换为“按钮”，然后在“单击”事件中替换按钮，则在get请求中，如果条件成立，则显式提交表单，也将帮助您实现所需的功能。

Onsubmit不调用函数

7 个答案: