ICEfaces
  1. ICEfaces
  2. ICE-10430

Components should only render "required" attribute into browser DOM if specified as HTML5 passthrough attribute

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.0
    • Fix Version/s: EE-4.0.0.GA, 4.1
    • Labels:
      None
    • Environment:
      ICEfaces 4.0 ACE and MOBI Components
    • Assignee Priority:
      P1

      Description

      As of JSF 2.2, components should avoid rendering their "required" attribute into the client browser DOM UNLESS "p:required" is specified, where "p:" is the prefix for the JSF 2.2. HTML5 Passthrough namespace (xmlns="http://xmlns.jcp.org/jsf/passthrough").

      In ICEfaces 4.0, ACE and MOBI components with "required='true'" specified render "required='true'" into the corresponding input element in the browser DOM which signals to the HTLM5 browser to use HTML5 client validation to validate the element. This prevents the submit of the form from occurring, and instead renders the browser's validation error message, which is not what JSF application developers would expect. This is an unexpected an incorrect behaviour.

      Instead, the components should only render the "required='true'" attribute into the input element in the browser DOM when specified using the "p:" passthrough attribute prefix, which signals to the component that the application would like to leverage HTML5 client-side validation in this case.

      Respecting the two different syntaxes allows the default JSF validation behaviour to work as expected even on HTML5 browsers, while still providing the optional ability for an application developer to specify that they want the client-side validation behavior (in which case it is expected that they understand the implications, etc.).




        Issue Links

          Activity

          Hide
          Ken Fyten added a comment -

          Example A (required="true" on h:inputText)

          <form id="form4" enctype="application/x-www-form-urlencoded" action="/textEntry/test4.jsf" method="post" name="form4">
          <input type="hidden" value="form4" name="form4"/>
          <input id="form4:email4" type="text" name="form4:email4"/>
          <input type="submit" value="Submit" name="form4:j_idt16"/>
          <input id="j_id1:javax.faces.ViewState:3" type="hidden" autocomplete="off" value="2502505059628786686:-2281570145891368982" name="javax.faces.ViewState"/>
          </form> 

          Note the lack of the "required" attribute on the input element in this case (avoids HTML5 client validation).

          Example B (p:required="true" on h:inputText)

          <form id="form4" enctype="application/x-www-form-urlencoded" action="/textEntry/test2.jsf" method="post" name="form4">
          <input type="hidden" value="form4" name="form4"/>
          <input id="form4:email4" type="text" >>>required="true"<<< name="form4:email4"/>
          <input type="submit" value="Submit" name="form4:j_idt16"/>
          <input id="j_id1:javax.faces.ViewState:3" type="hidden" autocomplete="off" value="-4307906694895023643:62285649438446818" name="javax.faces.ViewState"/>
          </form> 

          Note the presence of "required='true'" on the input element. This signals to the browser to perform client side validation for required.

          Show
          Ken Fyten added a comment - Example A (required="true" on h:inputText) <form id= "form4" enctype= "application/x-www-form-urlencoded" action= "/textEntry/test4.jsf" method= "post" name= "form4" > <input type= "hidden" value= "form4" name= "form4" /> <input id= "form4:email4" type= "text" name= "form4:email4" /> <input type= "submit" value= "Submit" name= "form4:j_idt16" /> <input id= "j_id1:javax.faces.ViewState:3" type= "hidden" autocomplete= "off" value= "2502505059628786686:-2281570145891368982" name= "javax.faces.ViewState" /> </form> Note the lack of the "required" attribute on the input element in this case (avoids HTML5 client validation). Example B (p:required="true" on h:inputText) <form id= "form4" enctype= "application/x-www-form-urlencoded" action= "/textEntry/test2.jsf" method= "post" name= "form4" > <input type= "hidden" value= "form4" name= "form4" /> <input id= "form4:email4" type= "text" >>>required= " true " <<< name= "form4:email4" /> <input type= "submit" value= "Submit" name= "form4:j_idt16" /> <input id= "j_id1:javax.faces.ViewState:3" type= "hidden" autocomplete= "off" value= "-4307906694895023643:62285649438446818" name= "javax.faces.ViewState" /> </form> Note the presence of "required='true'" on the input element. This signals to the browser to perform client side validation for required.
          Hide
          Judy Guglielmin added a comment -

          rev 43977 for source, rev 40584 for qa test

          Show
          Judy Guglielmin added a comment - rev 43977 for source, rev 40584 for qa test
          Hide
          Arturo Zambrano added a comment -

          r43992: deleted code in ckeditor.js that removed the 'required' attribute from the underlying <textarea> element.

          The reason why passing through the 'required' attribute in ace:richTextEntry didn't seem to work was because said attribute was deliberately removed from the underlying <textarea> element by the CKEditor code.

          The attribute was being rendered correctly at first. If you clicked on the menu item of the browser to view the page source, you could see that the <textarea> element was rendered with required="true". However, if you examined the markup in the developer tools window, you could see that the <textarea> element didn't have the required attribute any more. This occurred because the CKEditor code was removing on purpose said attribute. This has now been prevented, so that the HTML5 'required' attribute stays in the <textarea> element.

          Now, when an ace:richTextEntry component has the HTML5 'required' attribute set to true, the form is prevented from submitting, if the editor is empty, as desired. However, an error message appears in the console of the developer tools window that looks like this on Chrome: "An invalid form control with name='form1a:zmail1' is not focusable." This occurs because the native browser behaviour to point out which element is required can't be applied to to a hidden element, as is the case of the underlying <textarea> element used by ace:richTextentry. This doesn't affect functionality, though.

          Show
          Arturo Zambrano added a comment - r43992: deleted code in ckeditor.js that removed the 'required' attribute from the underlying <textarea> element. The reason why passing through the 'required' attribute in ace:richTextEntry didn't seem to work was because said attribute was deliberately removed from the underlying <textarea> element by the CKEditor code. The attribute was being rendered correctly at first. If you clicked on the menu item of the browser to view the page source, you could see that the <textarea> element was rendered with required="true". However, if you examined the markup in the developer tools window, you could see that the <textarea> element didn't have the required attribute any more. This occurred because the CKEditor code was removing on purpose said attribute. This has now been prevented, so that the HTML5 'required' attribute stays in the <textarea> element. Now, when an ace:richTextEntry component has the HTML5 'required' attribute set to true, the form is prevented from submitting, if the editor is empty, as desired. However, an error message appears in the console of the developer tools window that looks like this on Chrome: "An invalid form control with name='form1a:zmail1' is not focusable." This occurs because the native browser behaviour to point out which element is required can't be applied to to a hidden element, as is the case of the underlying <textarea> element used by ace:richTextentry. This doesn't affect functionality, though.
          Hide
          Ken Fyten added a comment -

          Since the HTML5 required error message isn't presented to the user in the case of ace:richTextEntry, we should not attempt to support the HTML5 pass-thru attribute on this component.

          Show
          Ken Fyten added a comment - Since the HTML5 required error message isn't presented to the user in the case of ace:richTextEntry, we should not attempt to support the HTML5 pass-thru attribute on this component.
          Hide
          Arturo Zambrano added a comment -

          r44004: reverted fix to keep 'required' attribute in textarea element of ace:richTextEntry.

          Show
          Arturo Zambrano added a comment - r44004: reverted fix to keep 'required' attribute in textarea element of ace:richTextEntry.
          Hide
          Liana Munroe added a comment -

          Verified ace:richTextEntry fix reverted ICEfaces 4 trunk r44009. Tomcat 7, FF 34, Chrome 40, IE 11.

          Show
          Liana Munroe added a comment - Verified ace:richTextEntry fix reverted ICEfaces 4 trunk r44009. Tomcat 7, FF 34, Chrome 40, IE 11.
          Hide
          Liana Munroe added a comment -

          Tested ace:richTextEntry scenarios as above using the existing richTextEntry dynamic attribute test. Both scenarios are verified passing ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44022. IE 11, 10, 9, 8, FF 34, Chrome 40.

          Show
          Liana Munroe added a comment - Tested ace:richTextEntry scenarios as above using the existing richTextEntry dynamic attribute test. Both scenarios are verified passing ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44022. IE 11, 10, 9, 8, FF 34, Chrome 40.

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Ken Fyten
            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: