Advanced HTML Editor 3 Support Product Page

Issues validating text area (bound by the Advanced HTML3 Editor) with the HTML5 Form Validator

Reported 22 Nov 2016 19:52:09
2
have this problem
22 Nov 2016 19:52:09 adrian cordea posted:
Hi
Using CC2017.
But the same issues exists in CC2015 and CS6

I just purchased the Advanced HTML3 editor and I am trying to use it together with the HML5 Form Validator to make the "text area" (called "Details" in my form), a required field.

I have the "Details" field set as "text area". I then insert the HTML5 Form Validator to validate this text area and everything is fine.

Then, if I add the HTML Editor 3 extension, the validation of this text area is being removed and no validation takes places on the text area anymore.

If I insert the HTML Advanced editor 3 first, when I am trying to add the validation to my text area, I am getting the following popup message: "Making this change would require changing code that is locked by a template or a translator. The change will be discarded". Then the HTML5 Form Validator extension closes right away.
If I manually add the required="required" parameter to my field, it is still being ignored by the HTML5 Form Validator
Here is the code used in my form

<form action="<%=MM_editAction%>" method="POST" name="VALIDATION" target="_top" id="VALIDATION" data-dmx-validate="true">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%">&nbsp;</td>
<td width="78%">&nbsp;</td>
</tr>
<tr>
<td height="30" valign="top">Event name</td>
<td valign="top"><label for="evname"></label>
<input name="evname" type="text" required="required" id="evname" size="45" data-msg-required=" *" /></td>
</tr>
<tr>
<td height="30" valign="top">Event date</td>
<td valign="top"><label for="evdate"></label>
<input name="evdate" type="text" required="required" id="evdate" size="10" data-msg-required=" *" /></td>
</tr>
<tr>
<td valign="top">Event details</td>
<td valign="top"><label for="evdetails"></label>
<textarea id="evdetails" required="required" name="evdetails" class="dmxEditor ipad" style="width:600px;height:300px"></textarea>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#evdetails".dmxEditor(
{"allowUpload": true, "uploadPath": "upload/files", "iconSet": "modern", "skin": "ipad", "extensions": ["path_browser", "resizer"]}
);
}
);
// ]]>
</script></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input name="submitted" type="hidden" id="submitted" value="<%=now()%>" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="add event" id="add event" value="Add new event" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="VALIDATION" />
</form>


If I move the following section

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#evdetails".dmxEditor(
{"allowUpload": true, "uploadPath": "upload/files", "iconSet": "modern", "skin": "ipad", "extensions": ["path_browser", "resizer"]}
);
}
);
// ]]>
</script>

inside the HEAD tag, it will allow me to add the "required" Validation for the "Details" field, however, the field validation still does not occur when I SUBMIT my form.

I created a test site at events.pvtc.ca/
There are two pages:
1. one with the validation that works on the "text area" field (when there is no AHE3 bound to the text area)
2. the second one (if you click the yellow link inside the form) has the Validator and also the AHE3 bound to the "evdetails" text area. The validation also existed for the evdetails field but got removed immediately when I inserted the AHE3 into the page for that field.

Any help is greatly appreciated.
Many thanks again
/Adrian

Reply to this topic