Question

当我按下注册按钮时，它不会提交。我怎样才能做到这一点？

< script >
  $(function() {
    //adds the 'invalid' class if textfield is empty
    $('button.btn').on('click', function(event) {
      event.preventdefault();
      if ('Register User' == $(this).val()) {
        for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
        }
      }
    });
  }); 
< /script>

.invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form>
  <div class="row">
    <div class="input-field col s6">
      <input name="name" type="text" class="validate" />
      <label class="active" for="task_name">Task Name</label>
    </div>
  </div>
  <button class="btn" type="submit" value="Register User" name="createTask">Register</button>
</form>

我也尝试使用“return false”而不是preventdefault（），仍然无法成功提交。

Answer 1

首先，您需要event.preventDefault()（大写字母D）。

preventDefault停止事件即将执行的操作，在这种情况下将是表单提交。这没关系，因为你想要验证输入，但这意味着你必须自己触发表单提交，如果你想要它通过。根据您当前的代码，最简单的方法是检查.invalid字段的数量，如果没有，则提交，like so：

$(function () {
    //adds the 'invalid' class if textfield is empty
    $('button.btn').on('click', function (event) {
        event.preventDefault();
        if ('Register User' == $(this).val()) {
            for (var i = 0; i < $('.validate').length; i++) {
                if ("" == $('.validate').eq(i).val()) {
                    $('.validate').eq(i).addClass('invalid');
                } else {
                    $('.validate').eq(i).removeClass('invalid');
                }
            }
            // Submit if there are no errors
            if ($('.invalid').length == 0) { 
                $('form').submit();
            }
        }
    });
});

如何进行表单提交工作？

1 个答案: