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 */