Improved: Use browser validation for input element, support types

applications/accounting/widget/InvoiceForms.xml

@@ -636,11 +636,11 @@ under the License.
             </service>
         </actions>
         <field name="invoiceId"><hidden/></field>
-        <field name="emailAddressFrom" entry-name="mapFrom.emailAddress" parameter-name="sendFrom" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;SALES_INVOICE&quot;)"><text/></field>
-        <field name="emailAddressFrom" entry-name="mapTo.emailAddress" parameter-name="sendFrom" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;PURCHASE_INVOICE&quot;)"><text/></field>
-        <field name="emailAddressTo" entry-name="mapTo.emailAddress" parameter-name="sendTo" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;SALES_INVOICE&quot;)"><text/></field>
-        <field name="emailAddressTo" entry-name="mapFrom.emailAddress" parameter-name="sendTo" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;PURCHASE_INVOICE&quot;)"><text/></field>
-        <field name="emailAddressCc" entry-name="ccEmailAddress" parameter-name="sendCc"><text/></field>
+        <field name="emailAddressFrom" entry-name="mapFrom.emailAddress" parameter-name="sendFrom" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;SALES_INVOICE&quot;)"><text type="email"/></field>
+        <field name="emailAddressFrom" entry-name="mapTo.emailAddress" parameter-name="sendFrom" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;PURCHASE_INVOICE&quot;)"><text type="email"/></field>
+        <field name="emailAddressTo" entry-name="mapTo.emailAddress" parameter-name="sendTo" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;SALES_INVOICE&quot;)"><text type="email"/></field>
+        <field name="emailAddressTo" entry-name="mapFrom.emailAddress" parameter-name="sendTo" use-when="&quot;${invoice.invoiceTypeId}&quot;.equals(&quot;PURCHASE_INVOICE&quot;)"><text type="email"/></field>
+        <field name="emailAddressCc" entry-name="ccEmailAddress" parameter-name="sendCc"><text type="email"/></field>
         <field name="subject"><text default-value="Please find attached invoice."/></field>
         <field name="otherCurrency" entry-name="parameters.other" parameter-name="other"><check/></field>
         <field name="bodyText"><textarea/></field>

applications/humanres/widget/forms/EmployeeForms.xml

@@ -63,7 +63,7 @@
         <field name="contactNumber" title="${uiLabelMap.PartyPhoneNumber}" required-field="true"><text size="15" maxlength="15"/></field>
         <field name="extension" title="${uiLabelMap.PartyContactExt}"><text size="6" maxlength="10"/></field>
         <field name="emailAddressTitle" title="${uiLabelMap.PartyEmailAddress}" title-area-style="group-label"><display/></field>
-        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60"/></field>
+        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60" type="email"/></field>
         <field name="submitButton" title="${uiLabelMap.CommonSave}" widget-style="smallSubmit"><submit button-type="button"/></field>
     </form>
     <form name="AddEmployeeSkills" type="single" target="createEmployeeSkill" default-map-name="partySkill">

applications/marketing/widget/sfa/forms/AccountForms.xml

@@ -64,7 +64,7 @@ under the License.
         <field name="contactNumber" title="${uiLabelMap.PartyPhoneNumber}"><text size="15" maxlength="15"/></field>
         <field name="extension" title="${uiLabelMap.PartyContactExt}"><text size="6" maxlength="10"/></field>
         <field name="emailAddressTitle" title="${uiLabelMap.PartyEmailAddress}" title-area-style="group-label"><display/></field>
-        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60"/></field>
+        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60" type="email"/></field>
         <field name="submitButton" title="${uiLabelMap.CommonSave}" widget-style="smallSubmit"><submit button-type="button"/></field>
     </form>
 

applications/marketing/widget/sfa/forms/ContactForms.xml

@@ -141,7 +141,7 @@ under the License.
         <field name="contactNumber" title="${uiLabelMap.PartyPhoneNumber}"><text size="15" maxlength="15"/></field>
         <field name="extension" title="${uiLabelMap.PartyContactExt}"><text size="6" maxlength="10"/></field>
         <field name="emailAddressTitle" title="${uiLabelMap.PartyEmailAddress}" title-area-style="group-label"><display/></field>
-        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60"/></field>
+        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60" type="email"/></field>
         <field name="contactListTitle" title="${uiLabelMap.MarketingContactList}" title-area-style="group-label"><display/></field>
         <field name="contactListId" title="${uiLabelMap.MarketingContactList}">
             <drop-down allow-empty="true">

applications/marketing/widget/sfa/forms/LeadForms.xml

@@ -56,7 +56,7 @@ under the License.
         <field name="contactNumber" title="${uiLabelMap.PartyPhoneNumber}"><text size="15" maxlength="15"/></field>
         <field name="extension" title="${uiLabelMap.PartyContactExt}"><text size="6" maxlength="10"/></field>
         <field name="emailAddressTitle" title="${uiLabelMap.PartyEmailAddress}" title-area-style="group-label"><display/></field>
-        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60"/></field>
+        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="50" maxlength="60" type="email"/></field>
         <field name="leadSourceTitle" title="${uiLabelMap.SfaLeadSource}" title-area-style="group-label"><display/></field>
         <field name="dataSourceId" title="${uiLabelMap.SfaLeadSource}">
             <drop-down allow-empty="true">
@@ -123,7 +123,7 @@ under the License.
         <field name="firstName" title="${uiLabelMap.PartyFirstName}" required-field="true"><text size="15"/></field>
         <field name="lastName" title="${uiLabelMap.PartyLastName}" required-field="true"><text size="15"/></field>
         <field name="groupName" title="${uiLabelMap.CommonGroup}"><text size="15"/></field>
-        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="15"/></field>
+        <field name="emailAddress" title="${uiLabelMap.CommonEmail}"><text size="15" type="email"/></field>
         <field name="contactListId" title="${uiLabelMap.MarketingContactList}">
             <drop-down allow-empty="true">
                 <entity-options entity-name="ContactList" key-field-name="contactListId" description="${groovy:contactListName.substring(0,Math.min(contactListName.length(), 12))}..."/>

applications/order/template/entry/CustSettings.ftl

@@ -107,7 +107,7 @@ under the License.
                 <td width="26%" align="right"><div>${uiLabelMap.PartyEmailAddress}<br/>${uiLabelMap.OrderAllowSolicitation}</div></td>
                 <td width="5">&nbsp;</td>
                 <td width="74%">
-                  <input type="text" name="emailAddress" value="" size="60" maxlength="255" />
+                  <input type="text" name="emailAddress" value="" size="60" maxlength="255" type="email"/>
                   <br/>
                   <select name="emailSol">
                     <#if ("Y" == ((requestParameters.emailSol)!""))><option value="Y">${uiLabelMap.CommonY}</option></#if>

applications/party/template/party/EditContactMech.ftl

@@ -203,7 +203,7 @@ under the License.
       <tr>
           <td class="label">${mechMap.contactMechType.get("description",locale)}</td>
           <td>
-              <input type="text" size="60" maxlength="255" name="emailAddress" value="${(mechMap.contactMech.infoString)?default(request.getParameter('emailAddress')!)}" />
+              <input type="email" size="60" maxlength="255" name="emailAddress" value="${(mechMap.contactMech.infoString)?default(request.getParameter('emailAddress')!)}" />
           </td>
       </tr>
   <#elseif "FTP_ADDRESS" = mechMap.contactMechTypeId!>

applications/party/widget/partymgr/CommunicationEventForms.xml

@@ -928,7 +928,7 @@ under the License.
         <field name="donePage"><hidden value="${donePage}"/></field>
         <field name="communicationEventId"><hidden value="${parameters.communicationEventId}"/></field>
         <field name="partyId" entry-name="dummy" tooltip="${uiLabelMap.PartyLeaveEmpty}"><lookup target-form-name="LookupPartyName"/></field>
-        <field name="emailAddress"><text/></field>
+        <field name="emailAddress"><text type="email"/></field>
         <field name="firstName" position="1"><text/></field>
         <field name="middleName" position="2"><text/></field>
         <field name="lastName"><text/></field>

applications/product/template/facility/EditContactMech.ftl

@@ -221,7 +221,7 @@ under the License.
     <tr>
       <td class="label">${uiLabelMap.PartyEmailAddress}</td>
       <td>
-          <input type="text" class="required" size="60" maxlength="255" name="emailAddress" value="${(mechMap.contactMech.infoString)?default(request.getParameter('emailAddress')!)}" />
+          <input type="email" class="required" size="60" maxlength="255" name="emailAddress" value="${(mechMap.contactMech.infoString)?default(request.getParameter('emailAddress')!)}" />
       *</td>
     </tr>
   <#else>

framework/widget/dtd/widget-form.xsd

@@ -1497,6 +1497,25 @@ under the License.
                     <xs:documentation>Specifies a short hint that describes the expected value of an input field.</xs:documentation>
                 </xs:annotation>
             </xs:attribute>
+            <xs:attribute name="type" default="text">
+                <xs:annotation>
+                    <xs:documentation>Controls the type attribute on the input element. Limited to a few types. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types</xs:documentation>
+                </xs:annotation>
+                <xs:simpleType>
+                    <xs:restriction base="xs:token">
+                        <xs:enumeration value="text" />
+                        <xs:enumeration value="number" />
+                        <xs:enumeration value="email" />
+                        <xs:enumeration value="url" />
+                        <xs:enumeration value="tel" />
+                    </xs:restriction>
+                </xs:simpleType>
+            </xs:attribute>
+            <xs:attribute name="pattern" type="xs:string">
+                <xs:annotation>
+                    <xs:documentation>Controls the pattern attribute of the input element. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern</xs:documentation>
+                </xs:annotation>
+            </xs:attribute>
         </xs:complexType>
     </xs:element>
     <xs:element name="textarea" substitutionGroup="AllFields">

framework/widget/src/main/java/org/apache/ofbiz/widget/model/ModelFormField.java

@@ -5441,12 +5441,16 @@ public static class TextField extends FieldInfo {
         private final boolean readonly;
         private final int size;
         private final SubHyperlink subHyperlink;
+        private final String type;
+        private final String pattern;
 
         public TextField(Element element, ModelFormField modelFormField) {
             super(element, modelFormField);
             this.clientAutocompleteField = !"false".equals(element.getAttribute("client-autocomplete-field"));
             this.defaultValue = FlexibleStringExpander.getInstance(element.getAttribute("default-value"));
             this.mask = element.getAttribute("mask");
+            this.type = element.getAttribute("type");
+            this.pattern = element.getAttribute("pattern");
             Integer maxlength = null;
             String maxlengthStr = element.getAttribute("maxlength");
             if (!maxlengthStr.isEmpty()) {
@@ -5484,18 +5488,22 @@ protected TextField(int fieldSource, int size, Integer maxlength, ModelFormField
             this.clientAutocompleteField = true;
             this.defaultValue = FlexibleStringExpander.getInstance("");
             this.mask = "";
+            this.type = "";
+            this.pattern = "";
             this.maxlength = maxlength;
             this.placeholder = FlexibleStringExpander.getInstance("");
             this.readonly = false;
             this.size = size;
             this.subHyperlink = null;
         }
 
-        protected TextField(int fieldSource, int size, Integer maxlength, ModelFormField modelFormField) {
+        protected TextField(int fieldSource, int size, Integer maxlength, String type, ModelFormField modelFormField) {
             super(fieldSource, FieldInfo.TEXT, modelFormField);
             this.clientAutocompleteField = true;
             this.defaultValue = FlexibleStringExpander.getInstance("");
             this.mask = "";
+            this.type = type;
+            this.pattern = "";
             this.maxlength = maxlength;
             this.placeholder = FlexibleStringExpander.getInstance("");
             this.readonly = false;
@@ -5508,6 +5516,8 @@ private TextField(int fieldSource, int fieldType, ModelFormField modelFormField)
             this.clientAutocompleteField = true;
             this.defaultValue = FlexibleStringExpander.getInstance("");
             this.mask = "";
+            this.type = "";
+            this.pattern = "";
             this.maxlength = null;
             this.placeholder = FlexibleStringExpander.getInstance("");
             this.readonly = false;
@@ -5528,6 +5538,8 @@ protected TextField(TextField original, ModelFormField modelFormField) {
             this.clientAutocompleteField = original.clientAutocompleteField;
             this.defaultValue = original.defaultValue;
             this.mask = original.mask;
+            this.type = original.type;
+            this.pattern = original.pattern;
             this.placeholder = original.placeholder;
             this.size = original.size;
             this.maxlength = original.maxlength;
@@ -5639,6 +5651,22 @@ public void renderFieldString(Appendable writer, Map<String, Object> context, Fo
                 throws IOException {
             formStringRenderer.renderTextField(writer, context, this);
         }
+
+        /**
+         * Gets type.
+         * @return the type
+         */
+        public String getType() {
+            return this.type;
+        }
+
+        /**
+         * Gets pattern.
+         * @return the pattern
+         */
+        public String getPattern() {
+            return this.pattern;
+        }
     }
 
     /**
@@ -5666,7 +5694,7 @@ public TextFindField(Element element, ModelFormField modelFormField) {
         }
 
         public TextFindField(int fieldSource, int size, Integer maxlength, ModelFormField modelFormField) {
-            super(fieldSource, size, maxlength, modelFormField);
+            super(fieldSource, size, maxlength, "", modelFormField);
             this.defaultOption = UtilProperties.getPropertyValue("widget", "widget.form.defaultTextFindOption", "contains");
             this.hideIgnoreCase = false;
             this.hideOptions = false;

framework/widget/src/main/java/org/apache/ofbiz/widget/model/ModelFormFieldBuilder.java

@@ -803,10 +803,10 @@ public boolean induceFieldInfoFromEntityField(ModelEntity modelEntity, ModelFiel
                 this.setFieldInfo(textareaField);
             } else if (TEXT_FIELD_TYPES.contains(fieldType)) {
                 ModelFormField.TextField textField = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_ENTITY,
-                        TEXT_SIZE_BY_FIELD_TYPES.get(fieldType), TEXT_MAX_SIZE_BY_FIELD_TYPES.get(fieldType), null);
+                        TEXT_SIZE_BY_FIELD_TYPES.get(fieldType), TEXT_MAX_SIZE_BY_FIELD_TYPES.get(fieldType), "text", null);
                 this.setFieldInfo(textField);
             } else if (NUMERIC_FIELD_TYPES.contains(fieldType)) {
-                ModelFormField.TextField textField = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_ENTITY, 6, null, null);
+                ModelFormField.TextField textField = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_ENTITY, 6, null, "number", null);
                 this.setFieldInfo(textField);
             } else if (DATA_FIELD_TYPES.contains(fieldType)) {
                 String type = fieldType;
@@ -880,7 +880,7 @@ public boolean induceFieldInfoFromServiceParam(ModelService modelService, ModelP
             if ("text".equals(modelParamFieldType)) {
                 fieldInfo = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_SERVICE, null);
             } else if ("numeric".equals(modelParamFieldType)) {
-                fieldInfo = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_SERVICE, 6, null, null);
+                fieldInfo = new ModelFormField.TextField(FieldInfo.SOURCE_AUTO_SERVICE, 6, null, "number", null);
             } else if ("timestamp".equals(modelParamFieldType)) {
                 fieldInfo = new ModelFormField.DateTimeField(FieldInfo.SOURCE_AUTO_SERVICE, "timestamp");
             } else if ("date".equals(modelParamFieldType)) {
@@ -1047,6 +1047,7 @@ public void mergeOverrideModelFormField(ModelFormFieldBuilder builder) {
         this.encodeOutput = builder.getEncodeOutput();
         this.position = builder.getPosition();
         this.requiredField = builder.getRequiredField();
+        this.requiredFieldStyle = builder.getRequiredFieldStyle();
         this.separateColumn = builder.getSeparateColumn();
         this.disabled = builder.getDisabledSpec();
     }