Squiz Custom Form %begin keywords

(Lewis) #1

5.5.3.3

Hi,

I’ve built a custom form and I need to highlight form fields whenever an error occurs, using a red border for example.

I’ve created a suitable CSS class to toggle the red border and I’ve successfully used %begin_question_error_123456_q1% (for example) to dynamically add it to HTML textareas in the Details screen > Extras field but, when it comes to regular HTML inputs, %begin_question_error_… doesn’t work! - it simply outputs the CSS class every time, regardless of whether the field is in error or not.

Is this a bug in Squiz which only affects HTML input fields or is this intentional? If it’s intentional, how can I get around it, preferably without relying on JS.

Cheers.

(Lewis) #2

Just carried on experimenting with this and decided to switch to manually coding all the form fields instead. This way at least, I’ve got control over this CSS situation (%begin… keywords work ‘inline’).

Another bonus to manually coding the fields is that I can now use radio buttons (a W3C recommendation) instead of a dropdown for one of my questions. I tried radio buttons before in Squiz but unfortunately, you seem to loose control of the actual value that’s submitted with the form. At least with a dropdown in Squiz I was able to control the value of the response that was passed back.

I tried a trick with JS earlier (out of frustration) but evalkeywords wasn’t working, even with the %globals_ prefix for the question_error… keyword.

(Lewis) #3

Another alternative here (and perhaps a cleaner solution!?) is to create an ‘artificial’ border around the input. This way, you can still simply drop in the %question_field… keywords and have Squiz render the necessary HTML but that then get wrapped in the custom Format Bodycopy, with a

. You can then toggle the class on the
instead of the input, using the %begin_ keywords.
(Iain Simmons) #4

Hi @lewis,

It’s worth looking into the markup that Matrix generates by default. I believe it adds a sq-form-question-error class to the div with class sq-form-question that wraps each question (label + input), so that would give you a bit of flexibility in styling the input, the label or the whole question if desired.

Cheers,
iain