如何进行表单提交工作?

时间:2015-08-09 16:15:02

标签: javascript jquery

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

< 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(),仍然无法成功提交。

1 个答案:

答案 0 :(得分:0)

首先,您需要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();
            }
        }
    });
});