Adds AutoConnectInput::isValid function

mkdocs/acelements.md

@@ -178,16 +178,16 @@ A `label` is an optional string. A label is always arranged on the left side of
 
 ### <i class="fa fa-caret-right"></i> pattern
 
-A `pattern` specifies a [regular expression](https://www.w3schools.com/js/js_regexp.asp) that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. 
+A `pattern` specifies a [regular expression](https://www.w3schools.com/js/js_regexp.asp) that the AutoConnectInput element's value is checked against on form submission. If it is invalid, the background color will change, but it will be sent even if the data format does not match. To check whether the entered value matches the pattern, use the [isValid](apielements.md#isvalid) function.
 
 - The password that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:<br>`(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}`
-- Email address as _characters@characters.domain_:<br>`[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$`
+- Email address as _characters@characters.domain_:<br>`[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}`
 
-- IP address
+- IP address:<br>`(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])`
 
-- Host name of the internet
+- Host name of the internet:<br>`(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])`
 
-- Date (MM-DD-YYYY)
+- Date (MM/DD/YYYY) as range 1900-2099:<br>`(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d`
 
 - Twitter account:<br>`^@?(\w){1,15}$`
 
@@ -334,7 +334,7 @@ ACButton ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small
  
 ACCheckbox ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small> , *label* <small>\]</small> <small>\[</small> , **true** | **false** <small>\]</small> )
 
-ACInput ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small> , *label* <small>\]</small> <small>\[</small> , *placeholder* <small>\]</small> )
+ACInput ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small> , *label* <small>\]</small> <small>\[</small> , *pattern* <small>\]</small> <small>\[</small> , *placeholder* <small>\]</small> )
 
 ACRadio ( *name* <small>\[</small> , *values* <small>\]</small> <small>\[</small> , *label* <small>\]</small> <small>\[</small> , **AC\_Horizontal** | **AC\_Vertical** <small>\]</small> <small>\[</small> , *checked* <small>\]</small> )
 

mkdocs/datatips.md

@@ -61,7 +61,78 @@ input.value = ip.toString();
 
 In order for data to be correctly converted from a string, the input data must be consistent with the format. How to implement strict validation in sketches depends on various perspectives and the power of tiny devices is not enough to implement a complete lexical analysis. But you can reduce the burden for data verification using the **pattern** of AutoConnectInput.
 
-By giving a [**pattern**](achandling.md#check-data-against-on-submission) to [AutoConnectInput](apielements.md#pattern), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [**regular expression**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions). If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. Refer to [Handling the custom Web pages](achandling.md#check-data-against-on-submission) section.
+By giving a [**pattern**](achandling.md#check-data-against-on-submission) to [AutoConnectInput](apielements.md#pattern), you can find errors in data format while typing in custom Web pages. The pattern is specified by [**regular expression**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions). If the value during input of AutoConnectInput does not match the regular expression specified by the pattern, its background color changes to pink. Refer to [Handling the custom Web pages](achandling.md#check-data-against-on-submission) section.
+
+However, input data will be transmitted even if the value does not match the pattern. To check the value with the sketch, using the [**AutoConnectInput::isValid**](apielements.md#isvalid) function. The isValid function validates whether the value member variable matches a pattern and returns true or false.
+
+```cpp hl_lines="16 47"
+#include <ESP8266WiFi.h>
+#include <ESP8266WebServer.h>
+#include <AutoConnect.h>
+
+static const char input_page[] PROGMEM = R"raw(
+[
+  {
+    "title": "IP Address",
+    "uri": "/",
+    "menu": true,
+    "element": [
+      {
+        "name": "ipaddress",
+        "type": "ACInput",
+        "label": "IP Address",
+        "pattern": "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"
+      },
+      {
+        "name": "send",
+        "type": "ACSubmit",
+        "value": "SEND",
+        "uri": "/check"
+      }
+    ]
+  },
+  {
+    "title": "IP Address",
+    "uri": "/check",
+    "menu": false,
+    "element": [
+      {
+        "name": "result",
+        "type": "ACText"
+      }
+    ]
+  }
+]
+)raw";
+
+AutoConnect portal;
+
+String checkIPAddress(AutoConnectAux& aux, PageArgument& args) {
+  AutoConnectAux* input_page = portal.aux("/");
+  AutoConnectInput& ipaddress = input_page->getElement<AutoConnectInput>("ipaddress");
+  AutoConnectText& result = aux.getElement<AutoConnectText>("result");
+
+  if (ipaddress.isValid()) {
+    result.value = "IP Address " + ipaddress.value + " is OK.";
+    result.style = "";
+  }
+  else {
+    result.value = "IP Address " + ipaddress.value + " error.";
+    result.style = "color:red;";
+  }
+  return String("");
+}
+
+void setup() {
+  portal.load(input_page);
+  portal.on("/check", checkIPAddress);
+  portal.begin();
+}
+
+void loop() {
+  portal.handleClient();
+}
+```
 
 !!! caution "Regular Expressions for JavaScript"
     Regular expressions specified in the AutoConnectInput pattern conforms to the [JavaScript specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).