Repeat email in HTML Form not the same. Why?

问题

I have a form on a website where a user needs to enter in their name and email twice to download something. However, the user can type two different emails in the fields, hit submit, and it will still show the success message. Why? Is there a pattern attribute I can use to accomplish this? I want the user to be forced to type in the same email twice or get the error message.

This is my HTML:

<form id="form" method="post" action="formmail.php" name="form" width="100%">
<input type="hidden" name="good_url" value="https://MYURL.com/index.html#submitgood" />
<input type="hidden" name="bad_url" value="https://MYURL.com/index.html#submitbad" />
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
<input type="hidden" name="derive_fields" value="email=EmailAddr,realname=username" />
<input type="hidden" name="recipients" value="myaddress" />
<input type="hidden" name="subject" value="Download" />

<fieldset>
<legend>Please fill out the information below to download.<br><br>Filesize, 59.8 MB.</legend><br>
<table cellspacing="0" cellpadding="0" id="confquest"><tr height="80px"><td>
<label for="Name" id="namelabel"><strong>Full name:</strong></label><br>
<input id="Name" type="text" name="username" title="Enter your full name" placeholder="Your Name" autofocus required /></td></tr>

<tr height="80px"><td><label for="eMail" id="emaillabel"><strong>Email address:</strong></label><br>
<input id="eMail" type="email" name="EmailAddr" title="Enter your email address" placeholder="example@mail.com" required /></td></tr>

<tr height="80px"><td><label for"eMail_repeat" id="emaillabel2"><strong>Repeat Email address:</strong></label><br>
<input id="eMail_repeat" type="email" name="email_addr_repeat" title="Repeat your email address" placeholder="example@mail.com" required oninput="check(this)" /></td></tr>
</table>

<input id="reset2" type="reset" name="reset" value="Clear" />
<input id="submit2" type="submit" name="submit" value="Submit" />
<input type="hidden" name="mail_options"
value="HTMLTemplate=https://www.MYURL.com/fmtemplates/mailtemplate5.html" />
</fieldset></form>

回答1:

It works after you add this after the input field for the email repeat.

<script> 
function check(input) { 
if (input.value != document.getElementById('eMail').value) { 
input.setCustomValidity('The two email addresses must match.'); 
} else { 
// input is valid -- reset the error message 
input.setCustomValidity(''); 
} 
} 
</script>

来源：https://stackoverflow.com/questions/19687776/repeat-email-in-html-form-not-the-same-why

标签

html

forms

formmail