Forums

I am having a problem with the error message location for the datepicker when using client side validation on a date picker element.

When the datetime input is blank and the form is submitted an error message is displayed as expected but in the wrong location.

The problem is the error message div is displayed before the clone (sandwiched between the real input and the clone) and i want it after the clone to match the rest of the input validations.

I have attached a screenshot which shows the problem even when i am using the option to use a tmpl=component to rule out any css problems.

[attachment=0]New Request-170733-b4-submit.png[/attachment]

As you can see the error message shifts the clone input box down and out of the right hand col.

[attachment=1]New Request-170116.png[/attachment]

The html which is produced in the form is:

<div class="ccms_form_element cfdiv_datetime" id="request_implant_date_container_div"><label for="request_implant_date">Implant Date</label>
<input id="request_implant_date" maxlength="150" size="16" class=" validate['required','target:request_implant_date_clone_id'] cf_date_picker" title="" type="text" value="" name="request_implant_date" style="display: none; ">

<div class="fc-error" style="visibility: visible; zoom: 1; opacity: 1; "><p>This field is required.</p></div>

<input maxlength="150" size="16" class=" validate['required','target:request_implant_date_clone_id'] cf_date_picker" title="" type="text" value="" style="display: inline-block; " id="request_implant_date_clone_id">

<div class="small-message">Please enter the expected implant date for the patient.</div><div class="clear"></div><div id="error-message-request_implant_date"></div></div>

really i want the line

<div class="fc-error" style="visibility: visible; zoom: 1; opacity: 1; "><p>This field is required.</p></div>

to be after the cloned input box

How can i change the position of the error message for the datetime element?

Many thanks
John

Hi John,

Actually the error message should be injected to this div:

<div id="error-message-request_implant_date"></div>

Not sure why it isn't doing this in your form, do you have the latest version ?

Regards,
Max

Hi and thanks for the quick response

Yes its the latest version i am using.

thanks
John

Hi

I think I have found out what the problem is caused by but not the solution.

In my form I have set the "Validation Errors" in the JS Validation Tab to "default" as I would like to see the default validation messages and I have the problem of the misplaced error message.

If i set the "Validation Errors" to "Field titles" it suddenly works correctly!!

Does this make any sense to anyone before I need to delve deeper in diagnosing the problem?

Many thanks
John