Highlight validation-error on required field

Dear Alain,

I am not sure whether this is an XForms or XSLTForms question but…

If a user submits a form where a required field is not specified how do highlight that field to the user?

For instance if I have a bind:

<xf:bind id="CallBackEmail"
                   nodeset="instance('booking-document')/call-back-email"
                   required="true()"
                   type="xf:email"/>

and the corresponding input

<xf:input id="email" bind="CallBackEmail" >
    <xf:label>Please enter the email address for completed forms to be delivered to</xf:label>
    <xf:alert>The entered email address is not valid.</xf:alert>
</xf:input>

I can use the following CSS styling to highlight the input when the cell value is invalid

.xforms-invalid .xforms-value {background-color: pink;} (taken from http://en.wikibooks.org/wiki/XSLTForms/CSS)

However no value is specified (i.e. is blank) it fails on form submission but no xforms-invalid class is associated with the input field - so how do I highlight the offending field(s)?

Kind regards,

Mike

Hello Mike,

A star should be displayed after the control when the node is required.

Displaying both the required star and the invalid icon for an empty value was previously judged as not a good idea and XSLTForms was modified accordingly.

What do you think?

-Alain

Hi Alain,

Well I agree that with the default xsltforms rendering both the star and invalid icon for empty values should probably not be displayed prior to form submission.

However with pure HTML forms it is fairly typical to highlight required fields that are empty after the user presses the submit button: this is the behaviour I am trying to recreate. Perhaps the addition of a new CSS class upon form submission would allow some control.

To give you an idea of what I am after please try the form at www.formsforhealth/registration.xml

If you enter a badly formed email address and press "book" you will see that the offending field is highlighted. If you press "book" when the email is blank the submit fails but the field is not highlighted.

Mike

Hello,

in our xsltforms installation we had to revert the change and put always the invalid icon for empty values because people missed it, they thought it was useful.

I think it should be a configurable feature to enable it when needed or do odlingsmee suggestion of activating it the first time submit event is fired.

Sorry I mistyped the link in my post above it should be: http://www.formsforhealth.co.uk/registration.xml

Mike

Can I support Mike in his plea to be able to find a way to highlight missing data on required fields after submit?

If your form has over 100 questions, seeing the one that is missing is difficult without a visual aid.

To do this we need some kind of signal (a class would be nice) on the displayed form field after a failed submit.

Thanks

Hello,

This has not been committed yet but I have already improved the current behavior: the invalid icon will appear for every input control bound to an empty required node after a validation-error before a submission.

The corresponding model is rebuilt so the icon(s) appear(s). The remaining problem is that the other models are not rebuilt and there might be missing icons.

What do you think?

-Alain

Hi Alain,

If I understand your description correctly then yes I think this is exactly what I was looking for - thank you.

Mike

This has been committed now.

Thank you for your feedbacks!

-Alain