javascript - 即使输入文本有效（Java 脚本或 Jquery），如何强制输入文本无效

Question

我有一个包含姓名、电子邮件和电话的表格。名称和电子邮件验证工作正常。但是电话验证不起作用。所以我使用了 intelInputPhone 验证。现在我可以验证我的电话号码，但表单仍然提交错误的输入，因为它只是考虑默认验证。如果 intelInputPhone 验证无效，我想强制它无效。所以这是主要问题：

如何更改输入的验证状态？

标签： javascriptjqueryformsvalidation

Answer 1

但表单仍然提交错误的输入，因为它只是考虑默认验证

我认为您期望此intelInputPhone模块具有 HTML5 验证行为。那是行不通的。

您现在必须在提交函数中处理验证。

看一下片段。

var phoneInputElement = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputElement, {
  initialCountry: "us",
});

$("#form").submit(function(event) {
  if (!phoneInput.isValidNumber()) {
    const errorCode = phoneInput.getValidationError();
  
    const errorMessage = (Object.entries(intlTelInputUtils.validationError).find(([key, value]) => value === errorCode) || ["INVALID_CODE",-1])[0]
    $("#phoneError").text(errorMessage)

    event.preventDefault();
    return;
  }



  var values = {};
  $('#form :input').each(function() {
    values[this.name] = $(this).val();
  });
  console.log(values);

  event.preventDefault();
});

#phoneError {
  color: red;
}

input, button, div.iti {
 margin-top: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/css/intlTelInput.css">

<form id="form">
  <input required type="text" name="name" placeholder="Enter name">
  <input required type="email" name="email" placeholder="Enter email">
  <input type="tel" id="phone" name="phone">
  <div id="phoneError"></div>
  <button type="submit">Send</button>
</form>