Question 274939 in Html Question posted in
Some basic documentation can be found here.

Html – Using Javascript to verify two emails are the same before submitting form

I need to verify the email fields are the same before submitting the form.
I have submitted the full html in the codepen with comments below but I am most unsure about the function and the syntax of how to prevent the form from submitting and alerting the user to make sure the emails match.

I tried the following code, I expected the browser to send an alert to the user that they need to "make sure the emails match" if they input emails that are different, what resulted was when submitting the form and the emails don’t match it does not alert the user and prevent the form from submitting

const element = document.getElementById("submit");
element.addEventListener("click", checkEmail);

function checkEmail() {
  const email = document.getElementById("first");
  const confirm = document.getElementById("confirm");

  if (email === confirm) {
    document.getElementById("form").submit();
  } else {
    event.preventDefault();
    alert("Make sure the emails match");
  }
}
<form action="http://northcarolinatest.atwebpages.com/Form.html" method="POST" id="form" autocomplete="off">
  <label for="first">First Name:</label>
  <input type="text" name="first" id="first" placeholder="John" required>
  <br>
  <label for="last">Last Name:</label>
  <input type="text" name="last" id="last" placeholder="Doe" required>
  <br>
  <label for="email">Email Address:</label>
  <input type="email" name="email" id="email" placeholder="[email protected]" required>
  <br>

  <label for="confirm">Confirm Email:</label>
  <input type="email" name="confirm" id="confirm" placeholder="[email protected]" required>
  <br>

  <label for="question">Question:</label>
  <input type="text" name="question" id="question" placeholder="Where do I go to register to vote?" width="500px" required>
  <br>
  <input type="Submit">
</form>

https://codepen.io/16nicolha/pen/MWLKdqz

Tags:

3

Answers


  1. 0

    What you need to do is intercept the submit event of <form>, not some strange button:

    function checkEmail(event) {
  // your code
}

document.querySelector("#form").addEventListener("submit", checkEmail)
    Login or Signup to reply.
  2. 0

    If you want to use standard HTML5 form usage…

    const
  myForm = document.querySelector('#my-form-id')
, errMsg = { email_confirm : `emails doesn't matches the same` }
, setError = elm =>
    {
    elm.setCustomValidity( errMsg[elm.name]);
    elm.oninput =_=>
      {
      elm.setCustomValidity(''); // clear error message
      elm.oninput = null;        // self remove setError assignation
      }
    };

myForm.onsubmit = e =>
  {
  if ( myForm.email_confirm.value !== myForm.email_address.value )
    {
    setError( myForm.email_confirm );
    myForm.reportValidity();
    return false
    }
  }
    label {
  display   : block;
  margin    : .6rem 0;
  font-size : .8rem;
  }
label > input {
  display   : block;
  font-size : 1.2rem;
  width     : 12rem;
  }
input[name="Question"] {
  width     : 40em; 
  }
button {
  width: 6em;
  }
    <form action="" id="my-form-id">
  <label> 
    First Name:
    <input type="text" required name="first_name" placeholder="John" >
  </label>
  <label>
    Last Name:
    <input type="text" required name="last_name" placeholder="Doe" >
  </label>
  <label>
    Email:    
    <input type="email" required name="email_address"  placeholder="[email protected]" >
  </label>
  <label>
    Email (confirm):    
    <input type="email" required name="email_confirm"  placeholder="[email protected]" >
  </label>
  <label>
    Question: 
    <input type="text"  required name="Question" placeholder="Where do I go to register to vote?" >
  </label>

  <button>Submit</button>
  <button type="reset">Reset</button>

</form>
    Login or Signup to reply.
  3. 0

    As @Đinh Carabus said, you are comparing two elements denoted by these:

    const email = document.getElementById("first");
const confirm = document.getElementById("confirm");

    You must get their values first before you compare them lest, a mismatch will happen.

    You also need to intercept the form’s submit event as @Tachibana Shin said.

    Here’s what your JS code should be:

    const form = document.getElementById("form");
form.addEventListener("click", checkEmail);

function checkEmail(event) {
    const email = document.getElementById("first").value;
    const confirm = document.getElementById("confirm").value;

    if (email === confirm) {
        document.getElementById("form").submit();
    } else {
        event.preventDefault();
        alert("Make sure the emails match");
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search