ICEfaces
  1. ICEfaces
  2. ICE-10883

Add new "validateOn" attribute to ACE clientValidate* components

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.2.BETA, 4.2
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 4.1
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      The ace:clientValidate* components currently hard-code the client events that trigger their invocation. While this is fine for most use-cases, it would be nice to be able to control which events triggered their execution in some cases.

      For example, the will fire when blurring away from an input component currently, but it might be desirable to have them fire only when a component is being submitted to the server, as an example.

      This can be implemented by adding support for an "event" attribute on the ace:clientValidate* components which would specify the event to trigger the validation on, i.e. "blur", "keypress", "submit".

        Activity

        Hide
        Mircea Toma added a comment -

        Introduced validateOn attribute for client validation components. The attribute takes an event name (such as click, blur or mouseout). Implemented also functionality that triggers validation on specified event.

        Show
        Mircea Toma added a comment - Introduced validateOn attribute for client validation components. The attribute takes an event name (such as click , blur or mouseout ). Implemented also functionality that triggers validation on specified event.
        Hide
        Mircea Toma added a comment - - edited

        Remains to implement multiple event validation triggering per component.
        Add support in complex components for focus related events.
        Determine if we need to disable default events used for validation when validateOn is specified.

        Show
        Mircea Toma added a comment - - edited Remains to implement multiple event validation triggering per component. Add support in complex components for focus related events. Determine if we need to disable default events used for validation when validateOn is specified.
        Hide
        Ken Fyten added a comment -

        Would this feature work with any JS DOM events, or just actual component client behaviour events that the component supports?

        Show
        Ken Fyten added a comment - Would this feature work with any JS DOM events, or just actual component client behaviour events that the component supports?
        Hide
        Mircea Toma added a comment -

        Yes, any JS DOM event should work.

        Show
        Mircea Toma added a comment - Yes, any JS DOM event should work.
        Hide
        Ken Fyten added a comment -

        Remains to implement multiple event validation triggering per component.

        Yes, this would be useful since any supported DOM events can be used.

        Determine if we need to disable default events used for validation when validateOn is specified.

        Yes, if you specify custom events it should override the default ones.

        Show
        Ken Fyten added a comment - Remains to implement multiple event validation triggering per component. Yes, this would be useful since any supported DOM events can be used. Determine if we need to disable default events used for validation when validateOn is specified. Yes, if you specify custom events it should override the default ones.
        Hide
        Mircea Toma added a comment - - edited

        Implemented multiple custom event validation and automatic disabling of validation on default event.
        The custom events that trigger the validation can be defined as a space separated list of event types into the validateOn attribute:

        <ace:clientValidateRequired validateOn="blur click keyup"/>
        
        Show
        Mircea Toma added a comment - - edited Implemented multiple custom event validation and automatic disabling of validation on default event. The custom events that trigger the validation can be defined as a space separated list of event types into the validateOn attribute: <ace:clientValidateRequired validateOn= "blur click keyup" />
        Hide
        Mircea Toma added a comment - - edited

        It turns out that I missed checking in the modified JS code for the client validators. Please re-test.

        Show
        Mircea Toma added a comment - - edited It turns out that I missed checking in the modified JS code for the client validators. Please re-test.
        Hide
        Liana Munroe added a comment -

        ICEfaces 4 trunk r49171.
        Initial re-testing with ace:textEntry using clientValidators shows the events are now functioning as expected. Further testing will be carried out with additional ace comps and validators.

        Show
        Liana Munroe added a comment - ICEfaces 4 trunk r49171. Initial re-testing with ace:textEntry using clientValidators shows the events are now functioning as expected. Further testing will be carried out with additional ace comps and validators.
        Hide
        Liana Munroe added a comment - - edited

        ICEfaces 4 trunk r49171
        The ace:maskedEntry component works differently than other components such as textEntry and textAreaEntry when using the validateOn attribute.
        When using validateOn=blur there is no difference from the other components, meaning you can fire validation by entering any number of characters into the mask then blur away.
        When using validateOn=click or keyup (and possibly other events) the mask must be completely filled before the validation is fired. This makes validators such as clientValidateLength and clientValidateRequired seem incompatible with maskedEntry when used in this way.
        Is this the expected behaviour?
        QA test application ICE-10883.jsf, ICE-10883-2.jsf, ICE10883-3.jsf are found at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/maskedEntry

        Show
        Liana Munroe added a comment - - edited ICEfaces 4 trunk r49171 The ace:maskedEntry component works differently than other components such as textEntry and textAreaEntry when using the validateOn attribute. When using validateOn=blur there is no difference from the other components, meaning you can fire validation by entering any number of characters into the mask then blur away. When using validateOn=click or keyup (and possibly other events) the mask must be completely filled before the validation is fired. This makes validators such as clientValidateLength and clientValidateRequired seem incompatible with maskedEntry when used in this way. Is this the expected behaviour? QA test application ICE-10883 .jsf, ICE-10883 -2.jsf, ICE10883-3.jsf are found at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/maskedEntry
        Hide
        Liana Munroe added a comment - - edited

        ICEfaces 4 trunk r49171
        The validateOn events tested (blur, click, dblclick, keyup, contextmenu) do not function at all when used with a client validator inside an ace:comboBox, ace:selectMenu or with ace:checkboxButtons.

        QA test application ICE-10883.jsf, ICE-10883-2.jsf, ICE10883-3.jsf are found at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/comboBox

        QA test application ICE-10883.jsf found at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/selectMenu

        QA test application ICE-10883.jsf found at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/checkboxButtons

        Show
        Liana Munroe added a comment - - edited ICEfaces 4 trunk r49171 The validateOn events tested (blur, click, dblclick, keyup, contextmenu) do not function at all when used with a client validator inside an ace:comboBox, ace:selectMenu or with ace:checkboxButtons. QA test application ICE-10883 .jsf, ICE-10883 -2.jsf, ICE10883-3.jsf are found at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/comboBox QA test application ICE-10883 .jsf found at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/selectMenu QA test application ICE-10883 .jsf found at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/checkboxButtons
        Hide
        Mircea Toma added a comment - - edited

        ace:maskedEntry, ace:comboBox and ace:checkboxButtons components are more complex components that need additional infrastructure that will provide information to jQuery Validation on what elements need to have the event handlers registered on.

        Show
        Mircea Toma added a comment - - edited ace:maskedEntry , ace:comboBox and ace:checkboxButtons components are more complex components that need additional infrastructure that will provide information to jQuery Validation on what elements need to have the event handlers registered on.
        Hide
        Liana Munroe added a comment -

        ICEfaces 4 trunk r49183
        All ace client validators except ace:clientValidateRequired can be triggered with a blur event regardless of what the validateOn attribute is set to.
        This can be seen in the /ICE-10883.jsf, /ICE-10883-1.jsf, /ICE-10883-2.jsf test apps located at
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/textEntry

        Show
        Liana Munroe added a comment - ICEfaces 4 trunk r49183 All ace client validators except ace:clientValidateRequired can be triggered with a blur event regardless of what the validateOn attribute is set to. This can be seen in the / ICE-10883 .jsf, / ICE-10883 -1.jsf, / ICE-10883 -2.jsf test apps located at http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/textEntry
        Hide
        Mircea Toma added a comment -

        Modified clientvalidator.js code to disable default event listeners for the entire form (it is not possible to disable default events for each element with the current API). This means that when any of the client validators will use validateOn attribute then the rest of the validators will need to define the events to respond on as well.

        Show
        Mircea Toma added a comment - Modified clientvalidator.js code to disable default event listeners for the entire form (it is not possible to disable default events for each element with the current API). This means that when any of the client validators will use validateOn attribute then the rest of the validators will need to define the events to respond on as well.
        Hide
        Mircea Toma added a comment -

        Disable default event handlers used to run the validation only when the validated element has custom event validators defined. This in effect removes the restrictions described in previous comment.

        Show
        Mircea Toma added a comment - Disable default event handlers used to run the validation only when the validated element has custom event validators defined. This in effect removes the restrictions described in previous comment.
        Hide
        Mircea Toma added a comment -

        Capture custom events on the focusable element of the component when possible to ensure validation is triggered on the components with more complex markup.

        Show
        Mircea Toma added a comment - Capture custom events on the focusable element of the component when possible to ensure validation is triggered on the components with more complex markup.
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r49216. Tomcat 8, FF 47, Chrome 53, IE 11.
        There are still issues outstanding.

        ComboBox
        validateOn = keyup does not validate after the first keystroke. Two or more keystrokes are required to file validation where necessary.
        Test app: /comboBox/ICE-10883.jsf

        maskedEntry
        The length validator does not function properly when used with validateOn unless the mask is entirely filled. This seems to be an incompatibility.
        Click and keyup events do not work consistently. Sometimes they only function after the form has been submit.
        The Required validateOn=blur message is seen while the submit button is pressed but is removed when the button is released.
        Test app: /maskedEntry/ICE-10883.jsf

        checkboxButtons
        When testing Required validateOn=click The Required validation message is displayed after making a selection. To remove the message the form must be submit.
        When testing Length validate on blur/click, the validation messages are not removed after fulfilling the requirement and using blur or click.
        Test app: /checkboxButtons/ICE-10883.jsf

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r49216. Tomcat 8, FF 47, Chrome 53, IE 11. There are still issues outstanding. ComboBox validateOn = keyup does not validate after the first keystroke. Two or more keystrokes are required to file validation where necessary. Test app: /comboBox/ ICE-10883 .jsf maskedEntry The length validator does not function properly when used with validateOn unless the mask is entirely filled. This seems to be an incompatibility. Click and keyup events do not work consistently. Sometimes they only function after the form has been submit. The Required validateOn=blur message is seen while the submit button is pressed but is removed when the button is released. Test app: /maskedEntry/ ICE-10883 .jsf checkboxButtons When testing Required validateOn=click The Required validation message is displayed after making a selection. To remove the message the form must be submit. When testing Length validate on blur/click, the validation messages are not removed after fulfilling the requirement and using blur or click. Test app: /checkboxButtons/ ICE-10883 .jsf
        Hide
        Mircea Toma added a comment -

        Fixed ComboBox component client validation by applying validation on the actual user modified input element instead of the hidden input element used by the client side code for holding the value.

        Show
        Mircea Toma added a comment - Fixed ComboBox component client validation by applying validation on the actual user modified input element instead of the hidden input element used by the client side code for holding the value.
        Hide
        Mircea Toma added a comment - - edited
        • maskedEntry
          This component is incompatible with all the client validators. Any of the potential client validation constraints are already incapsulated by the component's client code.
        • checkboxButtons
          This component is incopatible because it has multiple elements that need to have their state tracked by events listeners. This is not currently doable with the jQuery Validation API.

        We'll need to document the limitations for these components.

        Show
        Mircea Toma added a comment - - edited maskedEntry This component is incompatible with all the client validators. Any of the potential client validation constraints are already incapsulated by the component's client code. checkboxButtons This component is incopatible because it has multiple elements that need to have their state tracked by events listeners. This is not currently doable with the jQuery Validation API. We'll need to document the limitations for these components.
        Hide
        Liana Munroe added a comment -

        Verified ace:comboBox issues fixed ICEfaces 4 trunk r49310. Tomcat 8, MS edge, IE 11, 10, 9, FF 47, Chrome 53.

        Show
        Liana Munroe added a comment - Verified ace:comboBox issues fixed ICEfaces 4 trunk r49310. Tomcat 8, MS edge, IE 11, 10, 9, FF 47, Chrome 53.
        Hide
        Ken Fyten added a comment -

        Re-opened.

        Can the TLD description for the validateOn event be expanded a bit to further explain the type of events supported (DOM events?), and also the fact that when used these events override the default events used to trigger the validator, etc. ?

        Show
        Ken Fyten added a comment - Re-opened. Can the TLD description for the validateOn event be expanded a bit to further explain the type of events supported (DOM events?), and also the fact that when used these events override the default events used to trigger the validator, etc. ?
        Hide
        Ken Fyten added a comment -

        I added notes to the Wiki page for ace:maskedEntry indicating that client validators are not supported with it.

        Show
        Ken Fyten added a comment - I added notes to the Wiki page for ace:maskedEntry indicating that client validators are not supported with it.
        Hide
        Mircea Toma added a comment -

        Explained better how 'validateOn' attribute can be used.

        Show
        Mircea Toma added a comment - Explained better how 'validateOn' attribute can be used.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: