Onclick email address verify

JavaScript
#1

I have a check password verify that works fine, see below.

I want to add a verification to email but I am not sure how to add to the input onclick.

The email address would like this.

Appreciate your help.

	<tr>
							<td align=right>
								Email Address:</td>
							<td>
								<input type="text" name="txtEmail" /></td>
						</tr>

						<tr>
							<td align=right>
								Retype Email Address:</td>
							<td>
								<input type="text" name="txtEmailVerify" /></td>
						</tr>
<td align=right>
								Administration Password:</td>
							<td>
								<input type="password" name="txtPassword" /></td>
						</tr>
						<tr>
							<td align=right>
								Retype Password:</td>
							<td>
								<input type="password" name="txtPasswordVerify" /></td>
<input type="button" name="btnSubmit" value="Continue" onclick="(function(){if(document.forms[0]['txtPassword'].value != document.forms[0]['txtPasswordVerify'].value){alert('Please make sure passwords match!'); document.forms[0]['txtPasswordVerify'].value=''; document.forms[0]['txtPassword'].value=''; document.forms[0]['txtPasswordVerify'].style.borderColor='red'; document.forms[0]['txtPassword'].style.borderColor='red';}else{document.forms[0].submit();}})()" />
#2

Hi,

Can you elaborate on what you mean by “verify”?
Email address format is notoriously tricky to check with a regex.
Personally I would just set the input type to “email” and the browser will do it for you:

<input type="email" placeholder="Enter your email address">

Change your input to the above, then try submitting the form with an invalid email address.

#3

Yes, I already have the regex, what I am looking for is to be sure it matches the same email address that would be first typed in the field. Which is what the password field is doing. I just don’t know how to add the correct code to the already coded verify password.

#5

Nah, I get it. The OP wants to implement similar functionality for the email fields (i.e. check that the submitted values are identical) before allowing the form to submit.

A couple of thoughts on the code you posted and the task at hand.

  • You shouldn’t use tables for layout purposes.
  • You should use labels for your form fields for accessibility (here’s why)
  • JavaScript validation can easily be bypassed. You should also be checking this on the server.
  • If I’m honest, I find such checks a bit annoying. If you want to make sure that the person has not mistyped their email address, send them a confirmation email with a link. They should click the link, so as to confirm their ownership of the email address.
  • I’m not a fan of the inline JavaScript (i.e. onclick="do-stuff; do more stuff; and more stuff;"). This is hard to read and to maintain. This should really be moved into its own file.

All of that said, here is how I would accomplish the task. I’ve copied all of the code (plush HTML) so that you can run it on your PC and play around with it.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="utf-8">
  <title>Form validation example</title>
</head>
<body>
  <form action="#">
    <div>
      <label for="txtEmail">Email Address:</label>
      <input type="text" name="txtEmail" id="txtEmail">
    </div>
    <div>
      <label for="txtEmailVerify">Retype Email Address:</label>
      <input type="text" name="txtEmailVerify" id="txtEmailVerify">
    </div>

    <button>Submit</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const email = document.querySelector('#txtEmail');
    const emailVerify = document.querySelector('#txtEmailVerify');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (email.value === '' || emailVerify.value === '') {
        alert('Please fill out both fields!')
      } else if (email.value !== emailVerify.value) {
        alert("Fields don't match");
      } else {
        this.submit();
      }
    });
  </script>
</body>
</html>
2 Likes
#6

I have used labels in the past. This is an older form prepared by a Certified MS developer that was very good. But perhaps now there is a better way of doing it. I have a minor change on something that was working fine, so I wanted to add the email spell check because users have a tendency to misspell, even their own email address. This is an enrollment form that sends email to activate their account and if the email is wrong, it only presents problems, like unnecessary phone calls, etc. This way it prevents that from happening.

Validation is checked on the server, but this prevents the misspells. I am not concerned about JS bypass on this particular site. But you have a valid point on this as well as the other ones.

I agree that it can be annoying, but I think users are used to that. Most financial institutions do both email and password checks.

I was confused what I thought would be an easy add-on. But as mentioned before, an extremely excellent coder did this and I wanted to make this same change.

I will look at your examples and play around with it. I appreciate that and also doing things the best possible way.

Thank you

#8

It looks like the text after the first alert should be a JavaScript comment.

#9

Oops. Ta. Fixed.

#10

Ok, well let’s make something that you can drop in the page and have work.

You currently have everything happening in the onsubmit action on your button:

<input type="button" name="btnSubmit" value="Continue" onclick="(function(){if(document.forms[0]['txtPassword'].value != document.forms[0]['txtPasswordVerify'].value){alert('Please make sure passwords match!'); document.forms[0]['txtPasswordVerify'].value=''; document.forms[0]['txtPassword'].value=''; document.forms[0]['txtPasswordVerify'].style.borderColor='red'; document.forms[0]['txtPassword'].style.borderColor='red';}else{document.forms[0].submit();}})()" />

We can simplify that to this:

<input 
  type="button" 
  name="btnSubmit" 
  value="Continue" 
  onclick="<code to check that passwords match>" 
/>

The code to make sure the passwords match can be expanded to this:

(function(){
  if(document.forms[0]['txtPassword'].value != document.forms[0]['txtPasswordVerify'].value){
    alert('Please make sure passwords match!'); 
    document.forms[0]['txtPasswordVerify'].value=''; 
    document.forms[0]['txtPassword'].value=''; 
    document.forms[0]['txtPasswordVerify'].style.borderColor='red'; 
    document.forms[0]['txtPassword'].style.borderColor='red';
  } else {
    document.forms[0].submit();
  }
})()

That works, but we will need to change the logic somewhat like so:

(function(){
  if (passwords don't match){
    alert('Please make sure passwords match!'); 
    ...
  } 

  if (emails don't match) {
    alert('Please make sure emails match!'); 
    ...
  } 
  
  Otherwise submit the form
})()

In code you could do it like this:

(function(){
  var isValid = true;
  
  if (document.forms[0]['txtPassword'].value != document.forms[0]['txtPasswordVerify'].value) {
    alert('Please make sure passwords match!'); 
    document.forms[0]['txtPasswordVerify'].value=''; 
    document.forms[0]['txtPassword'].value=''; 
    document.forms[0]['txtPasswordVerify'].style.borderColor='red'; 
    document.forms[0]['txtPassword'].style.borderColor='red';
    isValid = false;
  } 

  if (document.forms[0]['txtEmail'].value != document.forms[0]['txtEmailVerify'].value) {
    alert('Please make sure email addresses match!'); 
    document.forms[0]['txtEmail'].style.borderColor='red'; 
    document.forms[0]['txtEmailVerify'].style.borderColor='red';
    isValid = false;
  } 

  if (isValid) document.forms[0].submit();    
})();

Note that I am not resetting the value in the email fields if the values don’t match (as is happening in the password fields).

Then the final thing to do it to remove the spaces and stick it in a string:

Giving you:

<input type="button" name="btnSubmit" value="Continue" onclick="(function(){var isValid = true;if (document.forms[0]['txtPassword'].value != document.forms[0]['txtPasswordVerify'].value){alert('Please make sure passwords match!');document.forms[0]['txtPasswordVerify'].value='';document.forms[0]['txtPassword'].value='';document.forms[0]['txtPasswordVerify'].style.borderColor='red';document.forms[0]['txtPassword'].style.borderColor='red';isValid = false;}if (document.forms[0]['txtEmail'].value != document.forms[0]['txtEmailVerify'].value) {alert('Please make sure email addresses match!');document.forms[0]['txtEmail'].style.borderColor='red';document.forms[0]['txtEmailVerify'].style.borderColor='red';isValid = false;}if(isValid){document.forms[0].submit();}})();" />

Try that and let me know if it works

2 Likes
#11

Yes, that works!

Thanks for breaking out the code so I can see how that works. Most of my other forms lays it out like you did and it was confusing to me to see it in a string. But I see what you did. Again, thanks for that fix and education, but I will use other forms in code rather than a string. And I am assuming that is the way you would recommend doing it.

#12

I would recommend removing the inline click handler and adding the code in a separate JavaScript file (as in my original post). The code from my previous post is brittle and progressively harder to debug as it grows in complexity.

That said, if it works for you, you should be good for the time being :slight_smile:

Glad we got it working.

1 Like