forms don't validate after changing input type

I read an interesting article over at CSS Tricks about making the form fields more suitable for smartphone / tablet input.

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 (http://www.gravityhelp.com/documentation/page/Gform_field_input).

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.

Is there anything I'm missing here?

The code I used is:

/**
 * Add functionality to change input type Gravity Forms to optimize for tablets and smartphones
 * see article: http://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/
 * see GF help: http://www.gravityhelp.com/documentation/page/Gform_field_input
 */

add_filter( 'gform_field_input', 'cf_gf_input_types', 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 && $field['id'] == 3 || $form_id == 3 && $field['id'] == 2 || $form_id == 4 && $field['id'] == 3 || $form_id == 5 && $field['id'] == 2 )
	{
		$input = '<input type="email">';
	}

	// 4 forms all phone fields; 2 forms time field
	if (
		$form_id == 1 && $field['id'] == 4 || $form_id == 3 && $field['id'] == 3 || $form_id == 4 && $field['id'] == 4 || $form_id == 5 && $field['id'] == 3
		||
		$form_id == 1 && $field['id'] == 15 || $form_id == 4 && $field['id'] == 15   )
	{
		$input = '<input type="number">';
	}

	return $input;
}