added HTML5 validation message to text/password fields

themes/grav/css-compiled/template.css

@@ -565,7 +565,7 @@ form select {
   padding: 5px 30px 5px 10px;
   cursor: pointer;
   margin: 0; }
-form input[type=text], form input[type=password] {
+form input[type=text], form input[type=password], form input[type=email] {
   width: 100%;
   border: 1px solid #d4d4d4;
   background: #fff; }

themes/grav/scss/template/_forms.scss

@@ -210,7 +210,7 @@ form {
         margin: 0;
     }
 
-    input[type=text], input[type=password] {
+    input[type=text], input[type=password], input[type=email] {
         width: 100%;
         border: $form-border-width solid $form-border;
         background: $white;

themes/grav/templates/forms/fields/email/email.html.twig

@@ -0,0 +1,32 @@
+{% set value = (value is null ? field.default : value) %}
+
+<div class="form-field grid pure-g">
+    <div class="form-label block size-1-3 pure-u-1-3">
+        <label>
+            {% if field.help %}
+            <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
+            {% else %}
+            {{ field.label }}
+            {% endif %}
+            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
+        </label>
+    </div>
+    <div class="form-data block size-2-3 pure-u-2-3">
+        <div class="form-input-wrapper {{ field.size }}">
+            <input  type="email"
+                    class="{{ field.classes }}"
+                    name="{{ (scope ~ field.name)|fieldName }}"
+                    value="{{ value|join(', ') }}"
+                    {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
+                    {% if field.title %}title="{{ field.title }}"{% endif %}
+                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
+                    {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
+                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                    {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+                    {% if field.validate.message %}title="{{ field.validate.message }}"{% endif %}
+            />
+        </div>
+    </div>
+</div>

themes/grav/templates/forms/fields/password/password.html.twig

@@ -18,12 +18,12 @@
                     name="{{ (scope ~ field.name)|fieldName }}"
                     value="{{ value|join(', ') }}"
                     {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
-                    {% if field.title %}title="{{ field.title }}"{% endif %}
                     {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                     {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                     {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
                     {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                     {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+                    {% if field.validate.message %}title="{{ field.validate.message }}"{% endif %}
             />
         </div>
     </div>

themes/grav/templates/forms/fields/text/text.html.twig

@@ -25,7 +25,7 @@
                     {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
                     {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                     {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
-
+                    {% if field.validate.message %}title="{{ field.validate.message }}"{% endif %}
             />
         </div>
     </div>