表单验证有效但不会阻止表单提交

Question

我使用 javascript 来验证我的表单输入，它工作正常，但如果没有更正错误，表单仍然会被提交。

如何在用户更正之前阻止表单提交？

下面的示例代码；

$('.validate').hide();
$('body').on('blur', '#phone', function() {
  $('.validate').hide();
  isphone($(this).val());
});

function isphone(phone) {
  if (phone === "1234" || phone === "23456") {
    $(".validate").show();

  } else {
    $(".validate").hide();
  }
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />

  <div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div>

  <button href='/' type='submit' id="submitForm">Process</button>

</form>

Answer 1

为了写一个有用的答案，我做了一个小的重构，将 isphone 重写为一个可重用的验证函数，只是 returns true 或 false。我也改名了现在我们可以在不同的地方重用验证逻辑。

form 元素在实际提交之前发出 submit 事件。我们必须监听 sumbit 事件，如果验证失败，我们可以 return false 取消事件，从而阻止表单提交。

$('.validate').hide();
$('body').on('blur', '#phone', function() {
  var value = $(this).val();
  if (isPhoneInUse(value)) {
    $(".validate").show();
  } else {
    $(".validate").hide();
  }
});
$('#submitForm').on('submit', function(e) {
  var value = $("#phone").val();
  if (isPhoneInUse(value)) {
    // validation failed. cancel the event
    console.log("not submitting");
    return false;
  }
})

function isPhoneInUse(phone) {
  return (phone === "1234" || phone === "23456")
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<form action='' method='POST' id="submitForm">

  <input type="phone" name='phone' required='' id="phone" placeholder="0000-000-0000" />

  <div class="validate"><span style="color: red;"><b>Phone in use!</b></span></div>

  <button href='/' type='submit' id="submitForm">Process</button>

</form>

表单验证有效但不会阻止表单提交

Form Validation Works But Does Not Prevent Form Submission

javascript

forms

validation

form-submit