Add format check attribute for AutoConnectInput

examples/mqttRSSI/mqttRSSI.ino

@@ -60,13 +60,15 @@ static const char AUX_mqtt_setting[] PROGMEM = R"raw(
         "name": "mqttserver",
         "type": "ACInput",
         "value": "",
-        "placeholder": "MQTT broker server",
-        "label": "Server"
+        "label": "Server",
+        "pattern": "^(([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])$",
+        "placeholder": "MQTT broker server"
       },
       {
         "name": "channelid",
         "type": "ACInput",
-        "label": "Channel ID"
+        "label": "Channel ID",
+        "pattern": "^[0-9]{6}$"
       },
       {
         "name": "userkey",
@@ -93,12 +95,12 @@ static const char AUX_mqtt_setting[] PROGMEM = R"raw(
       {
         "name": "period",
         "type": "ACRadio",
-        "label": "Update period",
         "value": [
           "30 sec.",
           "60 sec.",
           "180 sec."
         ],
+        "label": "Update period",
         "arrange": "vertical",
         "checked": 1
       },
@@ -110,8 +112,9 @@ static const char AUX_mqtt_setting[] PROGMEM = R"raw(
       {
         "name": "hostname",
         "type": "ACInput",
+        "value": "",
         "label": "ESP host name",
-        "value": ""
+        "pattern": "^([a-zA-Z0-9]([a-zA-Z0-9-])*[a-zA-Z0-9]){1,32}$"
       },
       {
         "name": "save",

src/AutoConnectElementBasis.h

@@ -100,14 +100,15 @@ class AutoConnectCheckboxBasis : virtual public AutoConnectElementBasis {
  */
 class AutoConnectInputBasis : virtual public AutoConnectElementBasis {
  public:
-  explicit AutoConnectInputBasis(const char* name = "", const char* value = "", const char* label = "", const char* placeholder = "") : AutoConnectElementBasis(name, value), label(String(label)), placeholder(String(placeholder))  {
+  explicit AutoConnectInputBasis(const char* name = "", const char* value = "", const char* label = "", const char* pattern = "", const char* placeholder = "") : AutoConnectElementBasis(name, value), label(String(label)), pattern(String(pattern)), placeholder(String(placeholder))  {
     _type = AC_Input;
   }
   virtual ~AutoConnectInputBasis() {}
   const String  toHTML(void) const override;
 
   String  label;      /**< A label for a subsequent input box */
-  String  placeholder;
+  String  pattern;    /**< Format pattern to aid validation of input value */
+  String  placeholder;  /**< Pre-filled placeholder */
 };
 
 /**

src/AutoConnectElementBasisImpl.h

@@ -55,6 +55,8 @@ const String AutoConnectInputBasis::toHTML(void) const {
   if (label.length())
     html = String(F("<label for=\"")) + name + String("\">") + label + String(F("</label>"));
   html += String(F("<input type=\"text\" id=\"")) + name + String(F("\" name=\"")) + name + String("\"");
+  if (pattern.length())
+    html += String(F(" pattern=\"")) + pattern + String("\"");
   if (placeholder.length())
     html += String(F(" placeholder=\"")) + placeholder + String("\"");
   if (value.length())

src/AutoConnectElementJson.h

@@ -22,6 +22,7 @@
 #define AUTOCONNECT_JSON_KEY_MENU        "menu"
 #define AUTOCONNECT_JSON_KEY_NAME        "name"
 #define AUTOCONNECT_JSON_KEY_OPTION      "option"
+#define AUTOCONNECT_JSON_KEY_PATTERN     "pattern"
 #define AUTOCONNECT_JSON_KEY_PLACEHOLDER "placeholder"
 #define AUTOCONNECT_JSON_KEY_STYLE       "style"
 #define AUTOCONNECT_JSON_KEY_TITLE       "title"
@@ -115,10 +116,11 @@ class AutoConnectCheckboxJson : public AutoConnectElementJson, public AutoConnec
  */
 class AutoConnectInputJson : public AutoConnectElementJson, public AutoConnectInputBasis {
  public:
-  explicit AutoConnectInputJson(const char* name = "", const char* value = "", const char* label = "", const char* placeholder = "") {
+  explicit AutoConnectInputJson(const char* name = "", const char* value = "", const char* label = "", const char* pattern = "", const char* placeholder = "") {
     AutoConnectInputBasis::name = String(name);
     AutoConnectInputBasis::value = String(value);
     AutoConnectInputBasis::label = String(label);
+    AutoConnectInputBasis::pattern = String(pattern);
     AutoConnectInputBasis::placeholder = String(placeholder);
   }
   ~AutoConnectInputJson() {}

src/AutoConnectElementJsonImpl.h

@@ -141,7 +141,7 @@ void AutoConnectCheckboxJson::serialize(JsonObject& json) {
  * @return  An object size for JsonBuffer.
  */
 const size_t AutoConnectInputJson::getObjectSize() const {
-  return AutoConnectElementJson::getObjectSize() + JSON_OBJECT_SIZE(2);
+  return AutoConnectElementJson::getObjectSize() + JSON_OBJECT_SIZE(3);
 }
 
 /**
@@ -154,8 +154,9 @@ bool AutoConnectInputJson::loadMember(const JsonObject& json) {
   String  type = json.get<String>(F(AUTOCONNECT_JSON_KEY_TYPE));
   if (type.equalsIgnoreCase(F(AUTOCONNECT_JSON_TYPE_ACINPUT))) {
     _setMember(json);
-    placeholder = json.get<String>(F(AUTOCONNECT_JSON_KEY_PLACEHOLDER));
     label = json.get<String>(F(AUTOCONNECT_JSON_KEY_LABEL));
+    pattern = json.get<String>(F(AUTOCONNECT_JSON_KEY_PATTERN));
+    placeholder = json.get<String>(F(AUTOCONNECT_JSON_KEY_PLACEHOLDER));
     return true;
   }
   return false;
@@ -169,8 +170,9 @@ void AutoConnectInputJson::serialize(JsonObject& json) {
   _serialize(json);
   json.set(F(AUTOCONNECT_JSON_KEY_TYPE), F(AUTOCONNECT_JSON_TYPE_ACINPUT));
   json.set(F(AUTOCONNECT_JSON_KEY_VALUE), value);
-  json.set(F(AUTOCONNECT_JSON_KEY_PLACEHOLDER), placeholder);
   json.set(F(AUTOCONNECT_JSON_KEY_LABEL), label);
+  json.set(F(AUTOCONNECT_JSON_KEY_PATTERN), pattern);
+  json.set(F(AUTOCONNECT_JSON_KEY_PLACEHOLDER), placeholder);
 }
 
 /**

src/AutoConnectPage.cpp

@@ -119,6 +119,9 @@ const char AutoConnect::_CSS_UL[] PROGMEM = {
     "-moz-appearance:radio;"
     "-webkit-appearance:radio;"
   "}"
+  "ul.noorder>input[type=\"text\"]:invalid{"
+    "background:#fce4d6;"
+  "}"
 };
 
 /**< Image icon for inline expansion, the lock mark. */
@@ -220,9 +223,6 @@ const char AutoConnect::_CSS_INPUT_TEXT[] PROGMEM = {
   ".aux-page label{"
     "padding:10px 0.5em;"
   "}"
-  ".aux-page input[type=\"text\"]:invalid{"
-    "background:pink;"
-  "}"
 };
 
 /**< TABLE style */