CODEWITHSUNDEEP
javascriptformshtmldom
Henry
Henry

Reputation: 1065

a way to check validity of HTML5 forms?

Is it possible to check if an input element of an html5 form is valid based on the pattern I set for it? I know the psuedo class stuff.. but i'm hoping something like: document.getElementById('petitionName').valid can return true or false..

I really hope I don't need to create javascript to re-verify this stuff.

Upvotes: 71

Views: 75772

Answers (5)

sam
sam

Reputation: 1

Yes, you can check the validity of an input element in an HTML5 form using the checkValidity() method. This method is available on the HTMLInputElement interface and returns a Boolean value indicating whether the input satisfies its validation constraints.

<form>
  <label for="petitionName">Petition Name:</label>
  <input type="text" id="petitionName" pattern="[A-Za-z]+" required>
  <button type="button" onclick="checkValidity()">Check Validity</button>
</form>

<script>
function checkValidity() {
  var petitionNameInput = document.getElementById('petitionName');
  var isValid = petitionNameInput.checkValidity();

  if (isValid) {
    alert('Input is valid!');
  } else {
    alert('Input is not valid!');
  }
}
</script>

You can find more information here:https://webdesign.tutsplus.com/html5-form-validation-with-the-pattern-attribute--cms-25145t

Upvotes: 0

Trilmatic
Trilmatic

Reputation: 1

inputElement.checkValidity() returns boolean, but if you are working on a form-heavy page I would consider using some package like forms.js to handle client-side validation.

You can find more here https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity

Upvotes: 0

Leandro Carvalho
Leandro Carvalho

Reputation: 91

To complement, you can check each element was invalid and, for example, set a focus in the first invalid element, by this code:

var Form = document.getElementById('FormID');
if (Form.checkValidity() == false) {
    var list = Form.querySelectorAll(':invalid');
    for (var item of list) {
        item.focus();
    }
}

Upvotes: 8

alexander farkas
alexander farkas

Reputation: 1251

there are two ways to check the validity.

  1. inputElement.checkValidity() returns true or false
  2. inputElement.validity returns the validity-state object. inputElement.validity.valid returns true/false

Instead of using keyup, you can also use the 'input' event. All browser, which have implemented the constraint validation API, have also implemented the input-event.

If you are using option 1 above, Opera has a bug here and will show its validation hint. So you should use 2.

I have created a html5 forms library, which implements all unknown features to incapable browsers + fixes issues in HTML5 browsers. So everything works like defined in the spec, but it's built on top of jQuery. (http://afarkas.github.com/webshim/demos/index.html).

Upvotes: 125

alex
alex

Reputation: 490143

You can use the pattern attribute.

It will validate it client side, so no need to validate it again client side.

Example

jsFiddle.

But, make sure you do it again server side.

Also note, because browser compatibility is quite poor right now, JavaScript is the norm for validating client side.

Upvotes: 7

Related Questions