BAsic HTML5 form structure with HTML5 validation and jQuery/JS handling of the form based on HTML5 validation status

HTML5 Foirms jQuery

<form onsubmit="return false;">
	<input title="U.S. or Canadian Zip or Postal code is required" pattern="(\d{5}([\-]\d{4})?)|[A-Za-z][0-9][A-Za-z][ -]?[0-9][A-Za-z][0-9]" type="text" name="zip" value="" placeholder="Zip/Postal Code *" required />
	<input title="Phone number in form 123-456-7890 is required" pattern="(\d{3}-?\d{3}-?\d{4})" type="tel" name="phone" placeholder="Phone *" required />
	
	<input type="submit" name="submit" value="Submit" />
</form>


<script>
jQuery(document).ready(function(){
	jQuery('input[type=submit]').click(function(){
		if( jQuery('form').get(0).checkValidity() )
		{
			// The form is HTML5 valid
			// Do Ajax
		}
		else
		{
			// Throw errors, console.log or something else. Or nothing at all.
		}
	});
});
</script>

HTML5 Foirms + jQuery

<form onsubmit="return false;">
	<input title="U.S. or Canadian Zip or Postal code is required" pattern="(\d{5}([\-]\d{4})?)|[A-Za-z][0-9][A-Za-z][ -]?[0-9][A-Za-z][0-9]" type="text" name="zip" value="" placeholder="Zip/Postal Code *" required />
	<input type="tel" pattern="(\d{3}-?\d{3}-?\d{4})" title="Phone number in form 123-456-7890 is required" name="phone" value="" placeholder="Phone *" required title="A valid Phone"/>
	
	<input type="submit" name="submit" value="Submit" />
</form>


<script>
jQuery(document).ready(function(){
	jQuery('input[type=submit]').click(function(){
		if( jQuery('form').get(0).checkValidity() )
		{
			// The form is HTML5 valid
			// Do Ajax
		}
		else
		{
			// Throw errors, console.log or something else. Or nothing at all.
		}
	});
});
</script>