From 84563bdcd499f366e259c1f0b130b9c47444eb14 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 23 Mar 2022 17:35:54 -0400 Subject: [PATCH] update docs --- docs/getting-started/form-controls.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/getting-started/form-controls.md b/docs/getting-started/form-controls.md index 472be696..b4c1584a 100644 --- a/docs/getting-started/form-controls.md +++ b/docs/getting-started/form-controls.md @@ -194,7 +194,7 @@ const App = () => { ### Custom Validation -To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument. +To create a custom validation error, pass a non-empty string to the `setCustomValidity()` method. This will override any existing validation constraints. The form will not be submitted when a custom validity is set and the browser will show a validation error when the containing form is submitted. To make the input valid again, call `setCustomValidity()` again with an empty string. ```html preview
@@ -257,6 +257,8 @@ const App = () => { }; ``` +?> Custom validation can be applied to any form control that supports the `setCustomValidity()` method. It is not limited to inputs and textareas. + ### Custom Validation Styles The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.