To convert input data correctly from the string, it must match its format. The validation implementation with sketches depends on various perspectives. Usually, the tiny devices have no enough power for the lexical analysis completely. But you can reduce the burden for data verification using the [**pattern**](achandling.md#check-data-against-on-submission) of AutoConnectInput.
By giving a [pattern](acelements.md#pattern) to [AutoConnectInput](apielements.md#pattern), you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section [Handling the custom Web pages](achandling.md#check-data-against-on-submission).
By giving a [pattern](acelements.md#pattern) to [AutoConnectInput](apielements.md#pattern), you can find errors in data format while typing in custom Web pages. Specifying the input data rule as a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) will validate the type match during input. If there is an error in the format during input, the background color of the field will change to pink. Refer to section [*Handling the custom Web pages*](achandling.md#check-data-against-on-submission).
However, input data will be transmitted even if the value does not match the pattern. Sketches require the validation of the received data. You can use the [AutoConnectInput::isValid](apielements.md#isvalid) function to validate it. The isValid function validates whether the value member variable matches a pattern and returns true or false.
@ -64,11 +64,11 @@ A **HOME** item located at the bottom of the menu list is a link to the home pat
You can change the HOME path using the AutoConnect API. The [**AutoConnect::home**](api.md#home) function sets the URI as a link of the HOME item of the AutoConnect menu.
## <iclass="fa fa-bars"></i>Extend AutoConnect menu with your sketches
## <iclass="fa fa-bars"></i>by attaching AutoConnect menu
The AutoConnect menu can contain HTML pages of your sketch as custom items. It works for HTML pages implemented by **ESP8266WebServer::on** handler or **WebServer::on** handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification of the legacy sketch code.
The AutoConnect menu can contain HTML pages of your owns sketch as custom items. It works for HTML pages implemented by **ESP8266WebServer::on** handler or **WebServer::on** handler for ESP32. That is, you can make it as menu items to invoke the legacy web page. The below screenshot is the result of adding an example sketch for the ESP8266WebServer library known as [FSBrowser](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer/examples/FSBrowser) to the AutoConnect menu item. It adds Edit and List items with little modification to the legacy sketch code.
You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section [Advanced Usage section](advancedusage.md#casts-the-html-pages-to-be-add-on-into-the-menu).
You can extend the AutoConnect menu to improve the original sketches and according to the procedure described in section [*Advanced Usage*](advancedusage.md#casts-the-html-pages-to-be-add-on-into-the-menu).
... and embeds a hyperlink with an [icon](apiextra.md#icons) in the bottom of the body section of *index.htm* contained in the data folder to jump to the AutoConnect menu.
Hieromon Ikasamo
6 years ago