Improved: Use browser validation for input element, support types (#862)

* Improved: Use browser validation for input element, support types Rely on browser native validation for inputs, using the "required" attribute, instead of jQuery Validation plugin. Support "number", "email", "url" and "tel" input types. Support "pattern" attribute for input types that supports it. Fix boolean attributes uses in FTL macros ("readonly", "required"). Fix required behavior when "required-field-style" is not empty. Add "required" attribute on password fields. Add "required" attribute to inputs in login forms OFBIZ-13183 * Improved: Use input type=number for numeric fields OFBIZ-13183 * Adjust new input types appearance OFBIZ-13183 * Use input type "email" instead of "text" for email fields OFBIZ-13183 * Fix checkstyle issues OFBIZ-13183 * Fix XSD issue You can't have both type="xs:string" and a nested complexType for the same element. OFBIZ-13183 * Always add an asterisk on mandatory fields Even if we defined a "required-field-style" attribute OFBIZ-13183 * Fix test on required-field-style attribute OFBIZ-13183 * Update renderAsterisks macro declarations OFBIZ-13183
apache · Dec 16, 2024 · 79e55dd · 79e55dd
1 parent 610e249
commit 79e55dd
Show file tree

Hide file tree

Showing 27 changed files with 281 additions and 62 deletions.
diff --git a/applications/accounting/widget/InvoiceForms.xml b/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>

diff --git a/applications/humanres/widget/forms/EmployeeForms.xml b/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">

diff --git a/applications/marketing/widget/sfa/forms/AccountForms.xml b/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>
 

diff --git a/applications/marketing/widget/sfa/forms/ContactForms.xml b/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">

diff --git a/applications/marketing/widget/sfa/forms/LeadForms.xml b/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))}..."/>

diff --git a/applications/order/template/entry/CustSettings.ftl b/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>

diff --git a/applications/party/template/party/EditContactMech.ftl b/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!>

diff --git a/applications/party/widget/partymgr/CommunicationEventForms.xml b/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>

diff --git a/applications/product/template/facility/EditContactMech.ftl b/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>

diff --git a/framework/widget/dtd/widget-form.xsd b/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">

diff --git a/framework/widget/src/main/java/org/apache/ofbiz/widget/model/ModelFormField.java b/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;

diff --git a/framework/widget/src/main/java/org/apache/ofbiz/widget/model/ModelFormFieldBuilder.java b/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();
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@