Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Numberfield and textfield are required, but if they are empty, only numberfield shows error when submitting.

Avatar

Level 1

My AEM version is 6.5. The nodes follow

 

<items jcr:primaryType="nt:unstructured">
   <number
       jcr:primaryType="nt:unstructured"                                     
       sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
       fieldLabel="number"
       min="1"
       name="./number"
       required="{Boolean}true"/>
   <text
       jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
       fieldLabel="Text"
       name="./text"
       required="{Boolean}true"/>
</items>

 

 

Observe: (The numberfield and textfield are requiredIf these two fields are empty, and then click submit button, only numberfield shows error.

Then I fill numberfield, and click submit button, the text field shows error.

error1.png

error2.png

Expected: If the two fields are empty, both of them should show error when click submit button.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@dz_dai 

There is no such weightage or priority of fields based on types, all the form fields will be looped and validated on submit.

In your case, number field has an additional attribute "required" where textfield doesn't. Because of the required attribute, numberfield is being validated before the other fields(textfield) which is HTML validation. Try to inspect and remove the required attribute from numberfield, you see all fields turning red at once.

Screenshot 2021-01-06 at 1.39.39 PM.png

 

 

View solution in original post

2 Replies

Avatar

Community Advisor

@dz_dai 

Yeah, I have seen this kind of behavior earlier. Try to install any 6.5 feature or service pack.

Avatar

Level 1
Now my AEM version is already 6.5. Maybe numberfield and textfield have weights? And numberfield has higher priority when throw required error?

Avatar

Correct answer by
Community Advisor

@dz_dai 

There is no such weightage or priority of fields based on types, all the form fields will be looped and validated on submit.

In your case, number field has an additional attribute "required" where textfield doesn't. Because of the required attribute, numberfield is being validated before the other fields(textfield) which is HTML validation. Try to inspect and remove the required attribute from numberfield, you see all fields turning red at once.

Screenshot 2021-01-06 at 1.39.39 PM.png

 

 

Avatar

Level 1
All fields can turn red when I try to remove required attribute on dom (The red area in the image above). But if remove required attribute from AEM node, the numberfield become not required. Only textfield turns red. Does that mean I should remove that attribute via javascript?

Avatar

Community Advisor

@dz_dai 

You don't need to remove anything if you want both the fields required. The required attribute/property is related to HTML and will be validated first. AEM does validation based on aria-required=true attribute. As the number field has both required and aria-required, HTML validation taking the precedence over AEM and will be validated first and highlighting in Red. At the end all the form fields will be validated nothing to worry.

-AG