Questions tagged [constraint-validation-api]

The Constraint Validation API allows validation of HTML form inputs before submission. Use this tag for questions about the Constraint validation API.

Constraint Validation API

The Constraint Validation API allows validation of HTML form inputs before submission.

References

47 questions
451
votes
17 answers

How to set custom validation messages for HTML forms?

I've got the following HTML form: http://jsfiddle.net/nfgfP/

Remember…
Skizit
  • 43,506
  • 91
  • 209
  • 269
36
votes
5 answers

How can I void a form action and execute jQuery when all HTML form elements are validated?

I have a simple HTML form that I want to leverage for required field validation. My issue is that I want to use the HTML5 form validation BUT at the same time avoid actually submitting the form because I want to execute a jQuery Ajax call instead. I…
Rees
  • 1,757
  • 9
  • 33
  • 50
29
votes
4 answers

How to manually show an HTML validation message from a JavaScript function?

I want to know if there is any way to programmatically show a HTML validation error, using a JavaScript function. This is useful for scenarios where email duplication has to be checked. For example, a person enters an email, presses the Submit…
Ahmad
  • 12,886
  • 30
  • 93
  • 146
24
votes
5 answers

Check if a browser has built-in HTML form validation?

How to check if a browser has built-in HTML form validation ability? By doing so, we don't need to apply jQuery form validation functions on browsers who can validate form by themselves.
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
17
votes
5 answers

Manually trigger HTML validation on button click

I am trying to handle form validation on button click. It is validating the form but not showing error. can anyone help me in this?
Imran Rashid
  • 3,352
  • 4
  • 31
  • 41
16
votes
1 answer

iOS Safari 13: Default validation bubble messages are not properly aligned

We're using HTML5 form validation without overwriting the default system UI for the validation error messages. This is working fine everywhere but on iOS Safari, where the validation messages are not aligned properly inside the bubble popup. We have…
MoritzLost
  • 2,611
  • 2
  • 18
  • 32
9
votes
1 answer

How to find which child element is invalid in an HTML form

Is there a way to find which child elements in the form is invalid using the html5 automatic form validation? I know we can check element by element, by calling checkValidity() method. What I'm seeking is, if there's a shorter way. For example, var…
pabz
  • 534
  • 1
  • 5
  • 15
9
votes
3 answers

How do I detect an attempted submission of invalid HTML forms?

When using HTML form validation, having an invalid input value in a form will halt submission of that form. How can I detect that the user attempted a failed form submission? The form's onsubmit handler does not fire when submission is halted by…
wheresrhys
  • 22,558
  • 19
  • 94
  • 162
6
votes
1 answer

How to call HTML5 form.checkValidity during form.onSubmit in WebForms?

How can i override, or extend, the standard WebForms WebForm_OnSubmit JavaScript function? I am using HTML5 input types in an ASP.net WebForms web-site. The user-agent (e.g. Chrome, IE, Firefox) already correctly handles data sanitization,…
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
5
votes
1 answer

HTML Validation: Using element.validity.typeMismatch and element.validity.tooLong

I have a JavaScript validation framework that I've created and I'm trying to add HTML validation to it. In my framework, validation is accomplished by binding validation-constraints to elements using a data- attributes. This is somewhat similar to…
Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
3
votes
1 answer

Why are custom validation messages causing my HTML form elements to stay invalid?

I've implemented a custom validation message on my input for the pattern validation rule while leaving the default message for required as is. However, when I do so, once the input becomes invalid, it never becomes valid again, even though I am…
Jacob Stamm
  • 1,660
  • 1
  • 29
  • 53
3
votes
1 answer

custom web component form element for constraint validation

Only some HTMLElements support the constraint validation api (e.g., HTMLButtonElement). I want to create a custom web component, which also supports the constraint validation api. In the following an example is given for the desired outcome: …
3
votes
3 answers

How to handle HTML constraint validation pop-up using Selenium?

After click on the "LOG IN" button, a "Please fill out this field." pop-up message appears. I want to get the text of this pop-up message by using Selenium. Is it even possible? Here is the HTML of the email input field:
2
votes
1 answer

Angular: using browser's HTML native build in validation error messages

Is there a way to use browser's native HTML validation error messages and use them in angular way? what I would like is to when having like a reactive form like this: testForm: FormGroup = this.fb.group({ postCode: [{ value: 'postcode', disabled:…
DS_web_developer
  • 3,622
  • 13
  • 52
  • 83
2
votes
1 answer

HTML validation constraints - setCustomValidity and novalidate

I'm struggling with the HTML5 native form validation. My understanding from Client-side form validation is you can manually set the validity state of an element with setCustomValidity(). However, this doesn't seem to override any native…
patrick3853
  • 1,100
  • 9
  • 17
1
2 3 4