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

发布于 2025-01-22 15:50:54 字数 984 浏览 1 评论 0原文

我使用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>

原文

I use javascript to validate my form input and it works fine but the form still gets submitted when errors are not corrected.

How do I prevent form submission until the user makes corrections?

Sample Code Below;

$('.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情话墙 2025-01-29 15:50:54

要编写一个有用的答案，我做了一个小型重构，重写是可重复使用的验证功能，只需返回true或false。我也重命名。现在，我们可以在不同位置重复使用验证逻辑。

表单元素在实际提交之前发射<代码>提交事件。我们必须收听Sumbit事件，如果验证失败，我们可以返回将取消事件的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>

To write a helpful answer, I made a small refactor, rewriting isphone to be a reusable validation function that just returns true or false. I renamed it too. Now we can reuse the validation logic in different places.

form elements emit a submit event just before they are actually submitted. We must listen for the sumbit event, and if validation fails, we can return false which will cancel the event, and therefore preventing form submission.

$('.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>

回复收藏 0 原文

~没有更多了~