即使输入文本有效（Javascript或Jquery），如何强制输入文本无效

Posted 2023-05-09

【中文标题】即使输入文本有效（Javascript或Jquery），如何强制输入文本无效

【英文标题】：how to force a input text to be invalid even if its valid (Java script or Jquery)

【发布时间】：2020-09-02 10:56:00

【问题描述】：

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

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

【问题讨论】：

你指的是这个插件吗？ github.com/jackocnr/intl-tel-input

【参考方案1】：

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

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

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

看看sn-p。

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>