Forms JS Validation
ExpressionEngine 2, ExpressionEngine 3
Back to this add-on's main page
View Other Add-ons From Rein de Vries
Forms JS Validation & Safari (mac)
Support (Resolved)
|
afairhurst
|
| Posted: 27 November 2012 12:39 PM |
|
|
|
|
Thank you for the excellent free plugin, which I’ve recently installed.
I’m having a problem getting it to work with Safari, and would be very grateful if you could assist.
First off, the plugin is working perfectly in Chrome (v23) and Firefox (v16).
Unfortunately, in Safari (v6) the inline validation doesn’t work, and instead redirects to the standard EE screen.
I’m using it with Freeform v4 on EE 2.4
Thank you!
|
|
|
|
|
Reinos
|
| Posted: 28 November 2012 06:06 AM |
# 1
|
|
|
Developer
|
Hi There,
Do you have a test link for me?
Rein
|
|
|
|
|
afairhurst
|
| Posted: 28 November 2012 10:55 AM |
# 2
|
|
|
|
Hi,
Thanks for your reply. I’ll DM you with the URL as it’s on a staging site.
Here’s the form code. Any ideas why it’s not working in Safari?
Many Thanks,
Andrew
<div class="callMe">
{exp:forms_js_validation:add
selector="form#1"
input_element_wrapper="reqValidation"
}
{exp:freeform:form
form_id="1"
return="/contact/thank_you"
required="first_name|last_name|email|phone1"
}
<h4>Request a call back</h4>
<p>Would you like to speak to someone? Please complete your details and we'll call back within 24hrs (Monday—Friday / 9am—5pm).</p>
<fieldset>
<ul>
<li class="reqValidation">
<label for="first_name">Name</label>
<input id="first_name" name="first_name" type="text" placeholder="First name" required="required">
</li>
<li class="reqValidation">
<label for="last_name"> </label>
<input id="last_name" name="last_name" type="text" placeholder="Last name" required="required">
</li>
<li class="reqValidation">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="e.g. example@domain.com" required="required">
</li>
<li class="reqValidation">
<label for="phone1">Phone</label>
<input id="phone1" name="phone1" type="tel" placeholder="e.g. +447500000000" required="required">
</li>
<li class="screen-reader">
<label for="honeepot">Don't put anything here</label>
<input type="text" name="honeepot" id="honeepot">
</li>
</ul>
</fieldset>
<fieldset>
<button type=submit>Call Me</button>
</fieldset>
{/exp:freeform:form}
</div><!-- CallMe -->
|
|
|
|
|
Reinos
|
| Posted: 28 November 2012 02:34 PM |
# 3
|
|
|
Developer
|
Well all the forms are not working at all :-)
Just pushed version 1.5.3 with an fix for this issue.
Let me know if this fix your problem.
Rein
|
|
|
|
|
afairhurst
|
| Posted: 28 November 2012 07:35 PM |
# 4
|
|
|
|
Hi Rein,
Thanks for your quick response.
I’ve installed the new version, however unfortunately it hasn’t solved the problem.
Kind Regards,
Andrew
|
|
|
|
|
Reinos
|
| Posted: 29 November 2012 11:45 AM |
# 5
|
|
|
Developer
|
In your code you select (selector=“form#1”) an form with form id=“1”.
But when i inspect the form, the form doens`t have an id=“1”, so the validation will never find this id because it not exists.
can you add ( form:id=“1”) to your freeform tag?
{exp:freeform:form
form:id="1"
return="/contact/thank_you"
required="first_name|last_name|email|phone1"
}
let me know if this will work.
Rein
|
|
|
|
|
afairhurst
|
| Posted: 12 December 2012 09:15 AM |
# 6
|
|
|
|
Hi,
Thanks for your reply. I’ve tried your suggestion, unfortunately to no avail.
Here’s the code. As before it works on Mac Chrome / Firefox, however not Safari.
I’m not sure what I’m doing wrong, as the example on your site works in Safari.
I’d appreciate any more suggestions you might have.
Kind Regards,
Andrew
[removed]var JS_FORMS = JS_FORMS || {};JS_FORMS.require_class[1] = "validation_required";JS_FORMS.email_class[1] = "validation_email";JS_FORMS.creditcard_class[1] = "validation_creditcard";JS_FORMS.group_class[1] = "validation_group";JS_FORMS.min_class[1] = "validation_min";JS_FORMS.max_class[1] = "validation_max";JS_FORMS.min_size_class[1] = "validation_min_size";JS_FORMS.max_size_class[1] = "validation_max_size";JS_FORMS.integer_class[1] = "validation_integer";JS_FORMS.number_class[1] = "validation_number";JS_FORMS.phone_class[1] = "validation_phone";JS_FORMS.url_class[1] = "validation_url";JS_FORMS.date_class[1] = "validation_date";JS_FORMS.ipv4_class[1] = "validation_ipv4";JS_FORMS.equals_class[1] = "validation_equals";JS_FORMS.min_checkbox_class[1] = "validation_min_checkbox";JS_FORMS.max_checkbox_class[1] = "validation_max_checkbox";JS_FORMS.condition_class[1] = "validation_condition";JS_FORMS.past_class[1] = "validation_past";JS_FORMS.future_class[1] = "validation_future";JS_FORMS.promt_position[1] = "topRight";JS_FORMS.selector[1] = "#sendMessage";JS_FORMS.input_element_wrapper[1] = ".reqValidation";JS_FORMS.scroll[1] = true;JS_FORMS.auto_hide_prompt[1] = false;JS_FORMS.auto_hide_delay[1] = "10000";JS_FORMS.ajax_form_validation[1] = false;JS_FORMS.ajax_form_validation_url[1] = "get";JS_FORMS.ajax_form_validation_method[1] = "get";JS_FORMS.binded[1] = true;JS_FORMS.show_one_message[1] = false;JS_FORMS.add_class[1] = true;[removed]
<form action="http://stage.domain.com/?ACT=36" accept-charset="utf-8" id="sendMessage" method="POST"><div style="display:none">
<input type="hidden" name="params_id" value="3543" />
</div>
<input type='hidden' name='form_source' value='Send a message button' />
<input type='hidden' name='web_page_url' value='http://stage.domain.com/contact/' />
<input type='hidden' name='webpage_source' value='Contact' />
<fieldset>
<ul>
<li class="reqValidation">
<label for="first_name">Name</label>
<input id="first_name" name="first_name" type="text" placeholder="First name" required="required" autofocus="autofocus">
</li>
<li class="reqValidation">
<label for="last_name"> </label>
<input id="last_name" name="last_name" type="text" placeholder="Last name" required="required">
</li>
<li class="reqValidation">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="e.g. example@domain.com" required="required">
</li>
<li class="reqValidation">
<label for="phone1">Phone</label>
<input id="phone1" name="phone1" type="tel" placeholder="e.g. +447500000000" required="required">
</li>
<li class="reqValidation">
<label for="message">Message</label>
<textarea id="message" name="message" rows="15" required="required"></textarea>
</li>
<li class="screen-reader">
<label for="honeepot">Don't put anything here</label>
<input type="text" name="honeepot" id="honeepot" />
</li>
</ul>
</fieldset>
<fieldset>
<button type=submit>Send</button>
</fieldset>
<div style="position:absolute; left: -1000em; overflow: hidden">
<label for="honeypot">This field is intended to catch out spammers - please leave it blank.</label>
<input type="text" name="honeypot" id="honeypot" />
</div>
</form>
|
|
|
|
|
Reinos
|
| Posted: 12 December 2012 01:57 PM |
# 7
|
|
|
Developer
|
How looks your EE code?
Rein
|
|
|
|
|
afairhurst
|
| Posted: 12 December 2012 07:18 PM |
# 8
|
|
|
|
<div class="callMe">
{exp:forms_js_validation:add
selector="#callMeBack"
input_element_wrapper=".reqValidation"
}
{exp:freeform:form
form_id="1"
form:id="callMeBack"
return="/contact/call_me_thank_you"
required="first_name|last_name|email|phone1"
}
<h4>Request a call back</h4>
<fieldset>
<input type='hidden' name='form_source' value='Request call back form' />
<input type='hidden' name='web_page_url' value='{exp:current_url:full_url}' />
<input type='hidden' name='webpage_source' value='{embed:pgTitle}' />
<ul>
<li class="reqValidation">
<label for="name">Name</label>
<input id="first_name" name="first_name" type="text" placeholder="First name" required="required">
<input id="last_name" name="last_name" type="text" placeholder="Last name" required="required">
</li>
<li class="reqValidation">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="e.g. example@domain.com" required="required">
</li>
<li class="reqValidation">
<label for="phone1">Phone</label>
<input id="phone1" name="phone1" type="tel" placeholder="e.g. +447500000000" required="required">
</li>
<li class="screen-reader">
<label for="honeepot">Don't put anything here</label>
<input type="text" name="honeepot" id="honeepot">
</li>
</ul>
</fieldset>
<fieldset>
<button type=submit>Call Me</button>
</fieldset>
{/exp:freeform:form}
</div>
|
|
|
|
|
Reinos
|
| Posted: 15 December 2012 06:44 AM |
# 9
|
|
|
Developer
|
Your test link is down?
Can`t reproduce your error/fault…
Rein
|
|
|
|
|
afairhurst
|
| Posted: 17 December 2012 06:22 PM |
# 10
|
|
|
|
Hi Rein,
Thanks for your reply.
I’m working on another site, which is on a fresh install. I’m going to see if I can get it working there and will report back.
Many Thanks.
Andrew
|
|
|
|
|
afairhurst
|
| Posted: 04 January 2013 06:42 AM |
# 11
|
|
|
|
I’ve yet to resolve this issue, which is also present in the fresh install.
|
|
|
|
|
Reinos
|
| Posted: 05 January 2013 12:19 PM |
# 12
|
|
|
Developer
|
What was the problem and how did you solve this problem?
Rein
|
|
|
|
