Error code messages on customised multi page forms

(Ryan Archer) #1

I'm trying to get the error messages to appear below each form element if it does not validate properly - within a customised multi page form that allows incomplete submissions. I am not sure how to go about this. If I don't customise the form and just using %form_contents% keyword in the 'Form Contents' bodycopy,  everything is 'sweet' and error messages appear below each incorrectly validated form element.

 

However, I need to heavily customise the form with some 'JQuery trickery' and I have just customised each section and put HTML into the bodycopy (grabbed the HTML by previewing the section before applying a bodycopy customisation). Now I have put the error code keyword underneath each form element for it to display error messages if incorrectly formatted - but all I still get is the general error message that is coming from the top level 'Form Contents' bodycopy. This is not enough feedback to form users, I want to give specific error message underneath each form element.

 

Is this possible? I'll cut and paste an example of my code below:

<div class="sq-form-question sq-form-question-tickbox-list sq-form-question-error" style="margin-top: 30px;">
    <fieldset>
      <legend class="sq-form-question-title">Are there any other training topics not covered that you think could be of interest to seniors in your community? <abbr class="sq-form-required-field" title="required">*</abbr></legend>
      <em class="sq-form-question-note">(if yes, please list topics below)</em>
      <div class="sq-form-question-answer">

            <input name=“q291589:q6[]” id=“q291589_q6_0” value=“0” tabindex=“6” class=“sq-form-field” type=“checkbox”>

            <label for=“q291589_q6_0”>Yes</label>

             &nbsp;&nbsp;&nbsp;

            <input name=“q291589:q6[]” id=“q291589_q6_1” value=“1” tabindex=“6” class=“sq-form-field” type=“checkbox”>

            <label for=“q291589_q6_1”>No</label>


      </div>

    </fieldset>

    <p id=“error_291589_q6” class=“sq-form-error”>%question_error_291589_q6%</p>

  </div>

  <div class=“sq-form-question sq-form-question-text” id=“q291589_q7” style=“display:none;”>

    <!-- <label class=“sq-form-question-title” for=“q291589_q7”>list training topics</label> -->

    <div class=“sq-form-question-answer”>

      <input name=“q291589:q7” value="" size=“100” maxlength=“300” id=“q291589_q7” tabindex=“7” class=“sq-form-field” type=“text”>

    </div>

  </div>

 

(Nic Hubbard) #2

Why are you needing to customize it in this way? Could you just not customize it, and use a jQuery Selector to target the elements that you need?

(Ryan Archer) #3

You make a good point Nic. Frankly, I was not aware of a better way. I wish to customise the appearance of the divs that hold all the question form elements (i.e. <div class="sq-form-question sq-form-question-text "> ) so I attempted to append a class/ID to these Divs using the 'Extras' field under Question Options, but it's not working out for me. I can't see the class getting added anywhere in the form.

 

This is why I resorted to such heavy customisation.

 

Also we wish to insert custom text, instructions, notices - they can't really go in there unless the form is custom. IF there was a way to just put a plain text type (no question) into a form, that would be nice.

(Ryan Archer) #4

Ok, I can see that extras adds the extra code to the input form element itself, not the div container.

I suppose the only way to target particular div elements is to wrap the whole form up in a parent div container on the 'Form Contents' bodycopy and target the css that way.

 

All modifications have to be global across the form.

 

I still have not got a solution for custom text though, how could I put this into a form without heavily customising it? The only option i can think of is to use a combination of keywords.

(Nic Hubbard) #5

I would just wrap the form in a div, then customize the styles using CSS. You shouldn't have to add any extra classes to the form fields.

(Ryan Archer) #6

All sorted. Should be using keywords and not hard coding input fields in.

(Tim Davison) #7

Sometimes form_contents is too broad to use if you want anything other than default functionality, but hard-coding to the degree you posted above is just painful.  This is the basic pattern I use if I'm heavily customising the form:

<div class="form-question">
  %question_label_6050_q3%<br />
  %question_field_6050_q3%
  %question_error_6050_q3^tagif:p^replace:<p>:<p class="error-message">%
</div><!-- /.form-question -->

The error message part only outputs anything if there is a submission error.  I use '.form-question' and ',error-message' (and the elements under them) to target for CSS.

 

Note this is for v4.18 and above.  Earlier versions worked differently (didn't have the question_error keyword) so we had a different pattern for that - obsolete now so I won't bore you with the details.

(Ryan Archer) #8

What you say makes sense Tim.

I just find it easier to read and edit the forms if I can see the actual content rather than a reference to ID numbers. Compounding this is when the form gets edited in v4.18.4 and then all the unique reference IDs get thrown out of order. Probably won't be an issue for much longer as our upgrade to latest version is happening soon.