diff --git a/examples/mqttRSSI/mqttRSSI.ino b/examples/mqttRSSI/mqttRSSI.ino index 9dbfbb8..94ba6c2 100644 --- a/examples/mqttRSSI/mqttRSSI.ino +++ b/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", diff --git a/src/AutoConnectElementBasis.h b/src/AutoConnectElementBasis.h index 0632c06..f25510c 100644 --- a/src/AutoConnectElementBasis.h +++ b/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 */ }; /** diff --git a/src/AutoConnectElementBasisImpl.h b/src/AutoConnectElementBasisImpl.h index ec64f67..367f144 100644 --- a/src/AutoConnectElementBasisImpl.h +++ b/src/AutoConnectElementBasisImpl.h @@ -55,6 +55,8 @@ const String AutoConnectInputBasis::toHTML(void) const { if (label.length()) html = String(F("")); html += String(F("(F(AUTOCONNECT_JSON_KEY_TYPE)); if (type.equalsIgnoreCase(F(AUTOCONNECT_JSON_TYPE_ACINPUT))) { _setMember(json); - placeholder = json.get(F(AUTOCONNECT_JSON_KEY_PLACEHOLDER)); label = json.get(F(AUTOCONNECT_JSON_KEY_LABEL)); + pattern = json.get(F(AUTOCONNECT_JSON_KEY_PATTERN)); + placeholder = json.get(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); } /** diff --git a/src/AutoConnectPage.cpp b/src/AutoConnectPage.cpp index f6bf8e2..7bf302d 100644 --- a/src/AutoConnectPage.cpp +++ b/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 */