HTML5 constraint validation for custom check

Question

I would like to check if username and email address is unique on client side.

Is there any way to add custom validation for constraint validation?

Or is there any other recommended way for this?

I assume I have to send async http request (I am using node js on server side) but would like to follow best practice for this one.

Canonical link if you are using Selenium: https://stackoverflow.com/questions/55223934/how-to-handle-html-constraint-validation-pop-up-using-selenium — TylerH, Nov 23 '22 at 14:21

score 0 · Answer 1 · answered Aug 20 '19 at 15:07

0

you can make a request on input's blur to check if what user has written in input is unique or not and show result to user with check mark or red X or you can show user after he clicked on signup button but i prefer the first solution

answered Aug 20 '19 at 15:07

Khashayar Pakkhesal

416
3
15

score 0 · Accepted Answer · answered Sep 25 '19 at 14:10

Yes you can use the setCustomValidity function from the constraint validation api, which is part of every form field (e.g., HTMLInputElement).

<input name="username">
<script>
  const field = document.querySelector('[name="username"]');
  field.addEventListener('change', () => {
    fetch('https://example.com/myapiforcheckingusername' {
      method:'POST',
      body: JSON.stringify({username: field.value})
    }).then((response) => {
      const alreadyExists = // process response to check if username already exists

      if (alreadyExists) {
        field.setCustomValidity('The username already exists!');
      }
    });
  });
</script>

The above code shows how to make an async validation on an input field. If the setCustomValidity is not the empty string it means it is a form error. If checkValidity is called on the accompanying form it returns false then.

You can check the MDN documentation for further examples on this matter.

HTML5 constraint validation for custom check

2 Answers2