javascript 如何在默认的浏览器提交事件中获得必填字段的自定义错误？

ugmeyewa 于 2023-03-16 发布在 Java

关注(0)|答案(3)|浏览(96)

当提交event执行时，它通常会看到哪个必填字段没有填写，然后弹出必填字段的第一个字段。

<div class="row">
 <form>
   <div class="col-md-6">
      <div class="detailsInput">
         <input type="text" class="form-control" id="firstName" name="firstname" required data-maxlength="20" placeholder="First Name" />
      </div>
   </div>
</div>
</div>

const form = document.querySelector('form');
const nameInput = document.querySelector('#firstName');

form.addEventListener('submit', function(event) {
  if (!nameInput.checkValidity()) {
  event.preventDefault(); // Prevent form submission
  nameInput.setCustomValidity('Please enter your name'); // Set custom error 
  message
 }
});

我目前触发的错误反映了所有的领域，但不是第一个required之一。
编辑：在默认事件浏览器行为中，弹出窗口需要自定义错误消息。

JavaScript

来源：https://stackoverflow.com/questions/75741165/how-to-get-custom-error-on-required-field-with-default-browser-submit-event

3条答案

按热度按时间

eni9jsuy1#

可以在JavaScript中使用HTML5必需属性和setCustomValidity（）方法

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

javscritp代码。

const form = document.querySelector('form');
const nameInput = document.querySelector('#name');

form.addEventListener('submit', function(event) {
  if (!nameInput.checkValidity()) {
  event.preventDefault(); // Prevent form submission
  nameInput.setCustomValidity('Please enter your name'); // Set custom error 
  message
 }
});

如果字段无效，则调用preventDefault（）方法以停止表单提交，并使用setCustomValidity（）方法为字段设置自定义错误消息。

赞(0）回复(0）举报 2023-03-16

kx5bkwkv2#

你可以试试这个：

const input = document.querySelector('input[name="firstname"]');

input.addEventListener('invalid', function(event) {
  if (event.target.validity.valueMissing) {
    event.target.setCustomValidity('Please tell us your lovely name.');
  }
})

input.addEventListener('keyup', function(event) {
  event.target.setCustomValidity('');
})

<form>
  <label for="name">Name:</label>
  <input type="text" id="firstname" name="firstname" required>
  <button type="submit">Submit</button>
</form>

参考：https://angelika.me/2020/02/01/custom-error-messages-for-html5-form-validation/

赞(0）回复(0）举报 2023-03-16

bvjxkvbb3#

事实上，互联网上有你的问题的答案，如这个链接https://code.tutsplus.com/tutorials/easy-form-validation-with-jquery--cms-33096，也许可以考虑先浏览互联网。

赞(0）回复(0）举报 2023-03-16