https://legacy.forums.gravityhelp.com/topic/forms-dont-validate-after-changing-input-type Gravity Support Forums Topic: forms don't validate after changing input type en-US Thu, 16 Apr 2026 23:02:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/forms-dont-validate-after-changing-input-type#post-341814 Mon, 24 Jun 2013 06:56:22 +0000 Richard Vav 341814@https://legacy.forums.gravityhelp.com/ <p>Yep the HTML5 date and time types are still pending support by the browser developers<br /> <a href="http://docs.webplatform.org/wiki/html/elements/input/type/date" rel="nofollow">http://docs.webplatform.org/wiki/html/elements/input/type/date</a><br /> <a href="http://docs.webplatform.org/wiki/html/elements/input/type/time" rel="nofollow">http://docs.webplatform.org/wiki/html/elements/input/type/time</a> </p> https://legacy.forums.gravityhelp.com/topic/forms-dont-validate-after-changing-input-type#post-341769 Mon, 24 Jun 2013 06:37:30 +0000 Piet 341769@https://legacy.forums.gravityhelp.com/ <p>Hi Richard, thanks for your reply.<br /> Guess I learned something new today :) I honestly didn't know that.<br /> I turned it on and that indeed works perfect, except not on the time fields. </p> https://legacy.forums.gravityhelp.com/topic/forms-dont-validate-after-changing-input-type#post-341736 Mon, 24 Jun 2013 06:29:46 +0000 Richard Vav 341736@https://legacy.forums.gravityhelp.com/ <p>Rather than using that function I would go to the Gravity Forms general settings page and set 'Output HTML5' to 'Yes', which will automatically set the email, website and phone input types to the corresponding email, url or tel which mobile devices recognise and display the correct keyboard for. </p> https://legacy.forums.gravityhelp.com/topic/forms-dont-validate-after-changing-input-type#post-341625 Mon, 24 Jun 2013 05:47:28 +0000 Piet 341625@https://legacy.forums.gravityhelp.com/ <p>I read an interesting article over at CSS Tricks about making the form fields more suitable for smartphone / tablet input. </p> <p>To do so, I changed the input type of my email and phone fields as well as a single text field I am using for time with the gform_field_input filter (<a href="http://www.gravityhelp.com/documentation/page/Gform_field_input)" rel="nofollow">http://www.gravityhelp.com/documentation/page/Gform_field_input)</a>. </p> <p>This works perfect right up until the moment of submitting, then exactly for those fields I have changed the input type for don't validate anymore.</p> <p>Is there anything I'm missing here?</p> <p>The code I used is:<br /> <pre><code>/** * Add functionality to change input type Gravity Forms to optimize for tablets and smartphones * see article: <a href="http://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/" rel="nofollow">http://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/</a> * see GF help: <a href="http://www.gravityhelp.com/documentation/page/Gform_field_input" rel="nofollow">http://www.gravityhelp.com/documentation/page/Gform_field_input</a> */ add_filter( &#39;gform_field_input&#39;, &#39;cf_gf_input_types&#39;, 10, 5 ); function cf_gf_input_types( $input, $field, $value, $lead_id, $form_id ) { //because this will fire for every form/field, only do it when it is the specific form and field // 4 forms all email fields if ( $form_id == 1 &amp;&amp; $field[&#39;id&#39;] == 3 || $form_id == 3 &amp;&amp; $field[&#39;id&#39;] == 2 || $form_id == 4 &amp;&amp; $field[&#39;id&#39;] == 3 || $form_id == 5 &amp;&amp; $field[&#39;id&#39;] == 2 ) { $input = &#39;&lt;input type=&quot;email&quot;&gt;&#39;; } // 4 forms all phone fields; 2 forms time field if ( $form_id == 1 &amp;&amp; $field[&#39;id&#39;] == 4 || $form_id == 3 &amp;&amp; $field[&#39;id&#39;] == 3 || $form_id == 4 &amp;&amp; $field[&#39;id&#39;] == 4 || $form_id == 5 &amp;&amp; $field[&#39;id&#39;] == 3 || $form_id == 1 &amp;&amp; $field[&#39;id&#39;] == 15 || $form_id == 4 &amp;&amp; $field[&#39;id&#39;] == 15 ) { $input = &#39;&lt;input type=&quot;number&quot;&gt;&#39;; } return $input; }</code></pre>