How to set custom error message with JavaScript? 1. Use the setCustomValidity() method to combine native form verification, and set prompts for specific input conditions through JavaScript. For example, when the username is less than 3 characters, it prompts "the username needs at least 3 characters"; 2. Combine HTML attributes (such as required, pattern) and JS supplementary verification, and return targeted prompts according to different reasons for verification failure. For example, when the email format is inconsistent, "the email must end with @example.com"; 3. Note that after each verification, you need to call setCustomValidity('') to clear the error information, select appropriate events (input and invalid) for listening, and ensure good mobile compatibility.

In web development, HTML5 form verification is a very practical feature that can automatically check whether the input content meets the requirements when the user submits a form. However, the default error message is often stiff and unfriendly. If you want to improve the user experience, customizing the error message is an easy but effective way.

Here are some practical methods to teach you how to implement custom form verification prompts using HTML5.

How to set custom error messages with JavaScript

HTML5 provides the setCustomValidity() method, allowing us to set custom error prompts for form elements. This method can be used in conjunction with the native form verification mechanism.

For example:

 <input type="text" id="username" required>

You can add verification logic and prompt information through JavaScript:

 const input = document.getElementById('username');

input.addEventListener('input', function () {
  if (input.value.length < 3) {
    input.setCustomValidity(&#39;The username requires at least 3 characters&#39;);
  } else {
    input.setCustomValidity(&#39;&#39;);
  }
});

In this way, when the user enters less than 3 characters, he will see the prompt you set.

Tips: When the parameter of setCustomValidity() is an empty string, it means that the current input is valid. If not empty, the form is submitted and the corresponding error message is displayed.

Combining HTML attributes and JS to achieve more flexible control

In addition to using JavaScript to control it completely, you can also use basic HTML attributes (such as required , minlength , pattern ) as preliminary restrictions, and then use JS for additional verification.

for example:

 <input type="email" id="email" required pattern=".*@example\.com">

Then use JS to customize the prompt:

 const emailInput = document.getElementById('email');

emailInput.addEventListener('invalid', function (e) {
  if (emailInput.validity.valueMissing) {
    emailInput.setCustomValidity('Please enter your email address');
  } else if (emailInput.validity.patternMismatch) {
    emailInput.setCustomValidity('Emailbox must end with @example.com');
  } else {
    emailInput.setCustomValidity('');
  }
}, false);

This method allows you to return more targeted prompts based on different reasons for verification failure.

Notes and FAQs

• Don't forget to clear the error message : remember to call setCustomValidity('') after each verification, otherwise the form will not be submitted even if the input is correct.
• Event selection should be accurate : input and invalid events are usually used together. input is used for real-time verification, invalid is used to capture the browser's default error prompt triggering time.
• Mobile compatibility is generally good : modern browsers and mobile phones support this API, but in some old browsers, it may require downgrade processing.

Basically that's it. Once you master setCustomValidity() and related event monitoring, you can achieve both beautiful and practical custom error prompts in HTML5 forms.

The above is the detailed content of HTML5 form validation custom error messages. For more information, please follow other related articles on the PHP Chinese website!