{"json_modified": "2016-09-04T03:21:10.826092", "uuid": "c742b635-3a2f-4882-9e47-50a62239c802", "title": "Constraint validation", "url": "/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation", "tags": ["NeedsContent", "CSS", "Guide", "HTML5", "Selectors"], "translations": [{"uuid": "13f2704c-162b-4db5-af27-e962ca4a0434", "title": "Validation de contraintes (formulaires)", "url": "/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation", "tags": [], "summary": "La cr\u00e9ation des formulaires sur le web a toujours \u00e9t\u00e9 une t\u00e2che complexe. Si le balisage en lui m\u00eame des formulaires reste simple, v\u00e9rifier la validit\u00e9 et la coh\u00e9rence de chaque valeur entr\u00e9e est relativement difficile, et assurer un retour utilisateur correct peut devenir un casse-t\u00eate.", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2014-07-23T14:09:55", "review_tags": []}], "modified": "2016-09-04T03:21:10", "label": "Constraint validation", "localization_tags": [], "locale": "en-US", "id": 5961, "last_edit": "2016-09-04T03:21:04", "summary": "The creation of web forms has always been a complex task. While marking up the form itself is easy, checking whether each field has a valid and coherent value is even more difficult, and informing the user about the problem may become a headache.<a href=\"/en-US/docs/Web/Guide/HTML/HTML5\" title=\"en/HTML/HTML5\"> HTML5</a> introduced new mechanisms for forms: it added new semantic types for the <a href=\"/en-US/docs/Web/HTML/Element/input\" title=\"The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.\"><code>&lt;input&gt;</code></a> element and <em>constraint validation</em> to ease the work of checking the form content on the client side. Basic, usual constraints can be checked, without the need for JavaScript, by setting new attributes; more complex constraints can be tested using the HTML5 <a href=\"/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API\" title=\"en/HTML/HTML5/Forms in HTML5#Constraint Validation API\">Constraint Validation API</a>.", "sections": [{"id": "Intrinsic_and_basic_constraints", "title": "Intrinsic and basic constraints"}, {"id": "Semantic_input_types", "title": "Semantic input types"}, {"id": "Validation-related_attributes", "title": "Validation-related attributes"}, {"id": "Constraint_validation_process", "title": null}, {"id": "Complex_constraints_using_HTML5_Constraint_API", "title": null}, {"id": "Constraint_combining_several_fields_Postal_code_validation", "title": "Constraint combining several fields: Postal code validation"}, {"id": "Limiting_the_size_of_a_file_before_its_upload", "title": "Limiting the size of a file before its upload"}, {"id": "Visual_styling_of_constraint_validation", "title": null}, {"id": "Controlling_the_look_of_elements", "title": "Controlling the look of elements"}, {"id": "required_and_optional_CSS_pseudo-classes", "title": ":required and :optional CSS pseudo-classes"}, {"id": "-moz-placeholder_CSS_pseudo-class", "title": ":-moz-placeholder CSS pseudo-class"}, {"id": "valid_invalid_CSS_pseudo-classes", "title": ":valid :invalid CSS pseudo-classes"}, {"id": "Default_styles", "title": "Default styles"}, {"id": "Controlling_the_text_of_constraints_violation", "title": "Controlling the text of constraints violation"}, {"id": "The_x-moz-errormessage_attribute", "title": "The x-moz-errormessage attribute"}, {"id": "Constraint_API's_element.setCustomValidity()", "title": "Constraint API's element.setCustomValidity()"}, {"id": "Constraint_API's_ValidityState_object", "title": null}, {"id": "Examples_of_personalized_styling", "title": null}, {"id": "HTML4_fallback", "title": null}, {"id": "Trivial_fallback", "title": null}, {"id": "JS_fallback", "title": null}, {"id": "Conclusion", "title": null}], "slug": "Web/Guide/HTML/HTML5/Constraint_validation", "review_tags": ["technical"]}