Question

我有一个带有jQuery验证的表单，如果所有字段都正确填充，我创建了返回true或false的函数。我的问题是如果我的函数返回false，我将如何以及使用哪种函数来阻止表单提交。

提前谢谢大家。

---编辑---

这是我检查所有字段是否填写正确的功能（基本功能）：

$("#btn_create").click(function(){

  $("input").each(function(){
    if($(this).css("border-color") == "rgb(249, 57, 57)"){
      check = false;
      return false;
    } else {
      check = true;
    }
  });

  if(check == false){
    $("#fill").fadeIn("slow");
  } else {
    $("#fill").fadeOut("slow");
  }
});

<form method="post" class="create">
  <div class="form-group col-lg-12">
    <input type="text" class="form-control" id="name" placeholder="Name">
  </div>

  <div class="form-group col-lg-12">
    <input type="email" class="form-control" id="email" placeholder="E-mail">
  </div>

  <div class="form-row">
    <div class="form-group col-lg-6">
      <input type="password" class="form-control" id="pass" placeholder="Password">
    </div>
    <div class="form-group col-lg-6">
      <input type="password" class="form-control" id="repass" placeholder="Retype Password">
    </div>
  </div>

  <div class="form-group col-lg-12">
    <input type="text" class="form-control" id="tlm" minlength="9" maxlength="9" placeholder="Contact">
  </div>

  <div class="form-group col-lg-12">
    <label class="label label-danger" id="fill">Please, fill all fields correctly!</label>
  </div>

  <div class="form-group col-lg-12 text-right">
    <button type="submit" id="btn_create" class="btn btn-primary">Sign in</button>
  </div>
</form>

当字段未正确填充时，边框颜色为红色，因此我最终对其进行了一些验证，如果有一些输入为border-color red，则为check = false。

PS：在提出这些问题之前，我已经搜索了诸如防止默认的答案......请不要说它是重复的，因为我已经尝试了那个并且由于某种原因无效。

Answer 1

$('#test').on('submit', function(e) {
  e.preventDefault();
  // do your custom stuffs and make a ajax call to submit it manually as per you requirement.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="POST">
  <input type="text" placeholder="Enter something" />
  <button>Submit</button>
</form>

尝试使用此代码。

使用jQuery防止表单

1 个答案: