1
0
-1

We use some complex validation on date fields that limit valid dates based on previous selections in the form. E.g. it has to be a certain day of the week or at least 7 days after another date they've entered elsewhere.

Currently we just pop up an error message if they get it wrong.

 

It would be way more user-friendly if we could grey out invalid dates based on the validation script.

Is there a way to do this?

 

    CommentAdd your comment...

    3 answers

    1.  
      3
      2
      1

      Hi Lin,

      Composer's Date field uses the JQuery Datepicker widget. You can initialise this widget globally to exclude (disable) weekends, days of the week, specific dates etc..

      For example:

      I've put together a short How-To for doing this in Composer, see: https://support.avoka.com/kb/x/HoDHAQ

      Note that you will still need to cater for the case where the user enteres the date manually! The tips mentioned in the How-To give a suggestion on how you could possibly leverage one business rule to achieve both outcomes.

      Cheers,

      Matt

       

        CommentAdd your comment...
      1.  
        1
        0
        -1

        Hi Ben,

        We are using the validation message as you describe for all our fields but my question is specifically about the date picker. We want to disable dates that don't pass the validation on that calendar.

         

        E.g. if the validation specifies that they can only pick weekdays, we want weekend days to be greyed out and not clickable. That would be more user-friendly than allowing them to select invalid days and then telling them they got it wrong.

         

        It is pretty common in html forms. There's an example here. http://aef-.github.io/jquery.filthypillow/

        1. Ben Warner

          Apologies Lin I misunderstood your question. I understand now. The capability you are after is not available out-of-the-box in the default Avoka date picker and so you would require a custom widget to achieve this behavior. Custom widgets can be developed and added to the Composer design tool as extensions, however developing these custom widgets can be an advanced technical piece of work. Typically, clients will engage Avoka to build custom widgets for them. I agree that this capability would be a more user friendly way to manage invalid date selections and I would like to raise a feature request with our engineering team on your behalf if that is ok with you, so that we may provide this as a standard feature in the future. Unfortunately this will not help you in the short term but we are continually working to improve the capabilities of the tool and optimize the user experience.

        CommentAdd your comment...
      2.  
        1
        0
        -1

        Hey Lin,

        The most common way to manage invalid field values is to present an error underneath the field. If you have defined your validation script correctly this should happen automatically in your form.

        In addition to the error message, the field in error should be styled differently so that it stands out on the page and draws the user's attention to the field. Typically this styling includes a shaded background color and/or border color in red/orange tones.

        Styling field values with pale grey text is commonly used to represent read-only fields, not to highlight invalid values. I would suggest to you that using pale grey to represent invalid values is not user-friendly as it goes against convention and will confuse users. Our recommendation would be to stick with conventional methods of highlighting invalid values as this will produce the most intuitive outcome for your users.

        If you do wish to change the default styling for invalid values this should be done globally for all fields. Some of this can be configured in the Theme properties tab in Composer (field error background color and error message color). For more advanced changes you may need to apply some CSS to your stylesheet (assuming you are working on HTML forms).

          CommentAdd your comment...