Forum
Form submission problem in Safari & Firefox
I have a form that has been working fine until recently and then on Friday I received an email from the client to say the form had stopped working. I’ve just updated Perch and the Forms App to the latest version and I’m still having trouble.
I’ve done some testing and it works in Chrome & Opera, but in Safari & Firefox it just returns the filled in form and doesn’t submit it?
Does anyone have any ideas?
Thanks
Nick
Here is the template:
<perch:form id="hall-booking-form" method="post" app="perch_forms">
<perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup" size="m" />
<div>
<perch:label for="name">Name <span class="required">(required)</span></perch:label>
<perch:input type="text" id="name" required="true" label="Name" />
<perch:error for="name" type="required">Please add your name</perch:error>
</div>
<div>
<perch:label for="address">Address <span class="required">(required)</span></perch:label>
<perch:input type="textarea" id="address" required="true" label="Address" />
<perch:error for="name" type="required">Please add your address</perch:error>
</div>
<div>
<perch:label for="postcode">Post code <span class="required">(required)</span></perch:label>
<perch:input type="text" id="postcode" required="true" label="Post code" class="postcode" />
<perch:error for="postcode" type="required">Please add your post code</perch:error>
</div>
<div>
<perch:label for="telephone">Telephone <span class="required">(required)</span></perch:label>
<perch:input type="tel" id="telephone" required="true" label="Telephone" />
<perch:error for="telephone" type="required">Please add your telephone number</perch:error>
</div>
<div>
<perch:label for="email">Email <span class="required">(required)</span></perch:label>
<perch:input type="text" id="email" required="true" label="Email" />
<perch:error for="email" type="required">Please add your email address</perch:error>
</div>
<div>
<perch:label for="org">Company/organisation</perch:label>
<perch:input type="text" id="org" label="Company/organisation" />
</div>
<div>
<perch:label for="date">Date of booking <span class="required">(required)</span></perch:label>
<perch:input type="date" id="date" required="true" label="Date" format="d/m/Y" />
<perch:error for="date" type="required">Please add the date</perch:error>
</div>
<div>
<perch:label for="start">Start time <span class="required">(required)</span></perch:label>
<perch:input type="time" id="start" required="true" label="Start time" />
<perch:error for="start" type="required">Please add the start time</perch:error>
</div>
<div>
<perch:label for="end">End time <span class="required">(required)</span></perch:label>
<perch:input type="time" id="end" required="true" label="End time" />
<perch:error for="end" type="required">Please add the end time</perch:error>
</div>
<fieldset class="radio">
<legend>Is this a repeat booking?</legend>
<perch:input type="radio" options="Yes|yes,No|no" name="repeat" id="repeat" />
</fieldset>
<fieldset id="repeat-bookings">
<legend>Repeat bookings</legend>
<div id="repeat-1">
<div>
<perch:label for="repeat-date-1">Date</perch:label>
<perch:input type="date" id="repeat-date-1" label="Date (1st repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-1">Start time</perch:label>
<perch:input type="time" id="repeat-start-1" label="Start time (1st repeat)" />
</div>
<div>
<perch:label for="repeat-end-1">End time</perch:label>
<perch:input type="time" id="repeat-end-1" label="End time (1st repeat)" />
</div>
</div>
<div id="repeat-2">
<div>
<perch:label for="repeat-date-2">Date</perch:label>
<perch:input type="date" id="repeat-date-2" label="Date (2nd repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-2">Start time</perch:label>
<perch:input type="time" id="repeat-start-2" label="Start time (2nd repeat)" />
</div>
<div>
<perch:label for="repeat-end-2">End time</perch:label>
<perch:input type="time" id="repeat-end-2" label="End time (2nd repeat)" />
</div>
</div>
<div id="repeat-3">
<div>
<perch:label for="repeat-date-3">Date</perch:label>
<perch:input type="date" id="repeat-date-3" label="Date (3rd repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-3">Start time</perch:label>
<perch:input type="time" id="repeat-start-3" label="Start time (3rd repeat)" />
</div>
<div>
<perch:label for="repeat-end-3">End time</perch:label>
<perch:input type="time" id="repeat-end-3" label="End time (3rd repeat)" />
</div>
</div>
<div id="repeat-4">
<div>
<perch:label for="repeat-date-4">Date</perch:label>
<perch:input type="date" id="repeat-date-4" label="Date (4th repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-4">Start time</perch:label>
<perch:input type="time" id="repeat-start-4" label="Start time (4th repeat)" />
</div>
<div>
<perch:label for="repeat-end-4">End time</perch:label>
<perch:input type="time" id="repeat-end-4" label="End time (4th repeat)" />
</div>
</div>
<div id="repeat-5">
<div>
<perch:label for="repeat-date-5">Date</perch:label>
<perch:input type="date" id="repeat-date-5" label="Date (5th repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-5">Start time</perch:label>
<perch:input type="time" id="repeat-start-5" label="Start time (5th repeat)" />
</div>
<div>
<perch:label for="repeat-end-5">End time</perch:label>
<perch:input type="time" id="repeat-end-5" label="End time (5th repeat)" />
</div>
</div>
<div id="repeat-6">
<div>
<perch:label for="repeat-date-6">Date</perch:label>
<perch:input type="date" id="repeat-date-6" label="Date (6th repeat)" format="d/m/Y" />
</div>
<div>
<perch:label for="repeat-start-6">Start time</perch:label>
<perch:input type="time" id="repeat-start-6" label="Start time (6th repeat)" />
</div>
<div>
<perch:label for="repeat-end-6">End time</perch:label>
<perch:input type="time" id="repeat-end-6" label="End time (6th repeat)" />
</div>
</div>
</fieldset>
<div>
<perch:label for="purpose">Purpose of hire <span class="required">(required)</span></perch:label>
<perch:input type="textarea" id="purpose" required="true" label="Purpose of hire" />
<perch:error for="purpose" type="required">Please add the purpose</perch:error>
</div>
<perch:content id="declaration" type="textarea" label="Declaration" textile="true" editor="markitup" size="m" />
<div class="checkbox">
<perch:input type="checkbox" id="declaration-agree" label="I agree to the declaration" required="true" />
<perch:label for="declaration-agree">I agree to the above declaration <span class="required">(required)</span></perch:label>
<perch:error for="purpose" type="required">You need to agree to the declaration</perch:error>
</div>
<div class="button">
<perch:input type="submit" id="submit" value="Send booking form" />
</div>
<perch:content id="notes" type="textarea" label="Notes" textile="true" editor="markitup" size="m" />
<perch:success>
<perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</perch:success>
</perch:form>
If you add debug to the page and submit the form, what does it output?
I'm presuming you're getting a validation stop with no associated error message.
Thanks for the fast reply Drew, here is what Debug gives:
It's the format validation on the date field.
Thanks Drew, I’ve changed the type from date to text and now it works fine.
Should type="date" work okay in Firefox/Safari with Perch Forms or is it best just to stick with text?
I've had a problem with type = date as well. It's not supported in IE or Firefox as far as I can tell. I thought it was supported in Safari though.
My impression was that browsers that don’t support type="date" should just treat it as a text field. I’m not sure whether it causes problems with the Forms app though if the browser doesn’t support it.
The validation error is from Perch, which does support
type="date"
- the issue being you're not entering a valid format of date in the text field.Thanks Drew, so if the browser supports date it should be in a valid format, but otherwise it would need checking with PHP/javaScript before passing it to Perch?
Yes, that's right.
I think HTML5 date fields are a bit immature at the moment. I wouldn't use them personally.
Thanks Drew, yes I’ll just stick with plain text fields.