etjossem/email_validation_comparison.html

## email_validation_comparison.html
<head>

</head>
<body>
  <h3>Email Validation Comparison</h3>
  <p>If the form clears when submitted, the validator decided its contents were a valid email address.</p>
  <form>
      <h4>No validation - not RFC-2821 compliant:</h4>
      <input type="text" required placeholder="Email" role="email" />
      <input type="submit" value="Submit">
  </form>
  <form>
      <h4>Basic regex validation for @ and dot - not RFC-2821 compliant:</h4>
      <input type="text" required placeholder="Email" role="email" pattern='.+\@.+\..+' value="" title="Double-check to be sure this is your email address." />
      <input type="submit" value="Submit"/>
  </form>
  <form>
      <h4>Proposed (built-in browser validation):</h4>
      <input type="email" required placeholder="Email" role="email" />
      <input type="submit" value="Submit">
  </form>
  <form>
      <h4>Alternative (full regex validation):</h4>
      <input type="text" required placeholder="Email" role="email" pattern='/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' value="" title="Double-check to be sure this is your email address." />
      <input type="submit" value="Submit">
  </form>
<script>

</script>
</body>
	<head>

	</head>
	<body>
	<h3>Email Validation Comparison</h3>
	<p>If the form clears when submitted, the validator decided its contents were a valid email address.</p>
	<form>
	<h4>No validation - not RFC-2821 compliant:</h4>
	<input type="text" required placeholder="Email" role="email" />
	<input type="submit" value="Submit">
	</form>
	<form>
	<h4>Basic regex validation for @ and dot - not RFC-2821 compliant:</h4>
	<input type="text" required placeholder="Email" role="email" pattern='.+\@.+\..+' value="" title="Double-check to be sure this is your email address." />
	<input type="submit" value="Submit"/>
	</form>
	<form>
	<h4>Proposed (built-in browser validation):</h4>
	<input type="email" required placeholder="Email" role="email" />
	<input type="submit" value="Submit">
	</form>
	<form>
	<h4>Alternative (full regex validation):</h4>
	<input type="text" required placeholder="Email" role="email" pattern='/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)\|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])\|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' value="" title="Double-check to be sure this is your email address." />
	<input type="submit" value="Submit">
	</form>
	<script>

	</script>
	</body>