CODEWITHSUNDEEP
javascripthtmlemail
William
William

Reputation: 146

HTML5 email input not validating email addresses?

Could anybody help me figure out why this input field is giving me grief?

<input class="form-field" placeholder="Email" type="email" name="CEMAIL" required oninvalid="setCustomValidity('Please enter a valid email address.')"/>

It's returning my custom message, when you enter absolutely anything, when you enter nothing, and when you enter a completely valid email address. My doctype has been set as html5 using 

<!DOCTYPE html>
<form action="newuserlogin.php" name="registerform" method="post">
<div class="form-title"><h1 style="width:100%;">New Customers Register</h1></div>
<p style="margin-bottom: 30px;">If you are new here then you will need to register an account with us. Please use the form on this page to register for your free acount.</p>
<input class="form-field" placeholder="First Name" type="text" name="FNAME" required />
<input class="form-field" placeholder="Last Name" type="text" name="LNAME" required />
<input class="form-field" id="pass1" placeholder="Password" type="password" name="ACCESS" required />
<input class="form-field" id="pass2" placeholder="Confirm Password" type="password" name="ACCESSCONF" required />
<input class="form-field" placeholder="Email" type="email" name="CEMAIL" required oninvalid="setCustomValidity('Please enter a valid email address.')" />
<input class="form-field" placeholder="Email Confirmation" type="email" name="CEMAILCONF" required oninvalid="setCustomValidity('Please enter a valid email address.')" />
<input class="form-field" placeholder="Phone Number" type="text" required pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" name="CPHONE" oninvalid="setCustomValidity('Please enter a valid phone number with no spaces.')" />
<input class="form-field" placeholder="House Name/Number" type="text" required name="CHNAME" />
<input class="form-field" placeholder="Address Line 1" type="text" required name="ADL1" />
<input class="form-field" placeholder="Address Line 2" type="text" required name="ADL2" />
<input class="form-field" placeholder="Post Code" type="text" required name="CPOSTC" />
<h3><div class="form-title">Preferred Delivery Times</div></h3>
<p style="margin-bottom: 30px;">Could you please provide us with any delivery information you think we need to know to deliver to your property.</p>
<p><textarea class="form-field2" placeholder="Please write some specific delivery instructions" type="text" name="DSPECD" /></textarea></p>

<div class="submit-container">
<input onclick="BothFieldsIdenticalCaseSensitive('pass1','pass2');" type="image" style="float: left; width: 95%; height: auto;" name="submit" src="/demo/img/register-account.png" border="0" alt="Submit" value="Submit" /></div>
</form>

Upvotes: 0

Views: 3883

Answers (1)

Every Screamer
Every Screamer

Reputation: 530

Are you sure you have it in form and sending it with submit or button?

<form>
   <input type=email>
   <input type=submit>
 </form>
  • this must work

edit: if you are using HTML5.. why do you have input ended with />... just > its enough...

!!!! YOUR LAST INPUT MUST BE TYPE="SUBMIT"....

Upvotes: 4

Related Questions