'JavaScript link error

I am using JavaScript to validate email. The problem is, when the email ids don't match, then one alert button will come. Once I click the button it still takes me to the other page, instead of same page to correct my mail id.

HTML:

<label for="department">Email ID</label>
<input type="email" size="30" name="email" id="email" required />
<label for="department">Confirm Email ID</label>
<input type="email" size="30" name="cname" id="confirm_email" required />
<input type="submit" name="submit" value="submit" class="button" onClick="validate()">

JavaScript:

function validate()
{
    if(document.getElementById("email").value != document.getElementById("confirm_email").value)
        alert("Email do no match");
}
javascriptphpjquery


Solution 1:[1]

You need to tell the submit button to not perform the submit 

function validate()
{
      if (document.getElementById("email").value!=document.getElementById("confirm_email").value) {
         alert("Email do no match");
         return false;
      }
}

Solution 2:[2]

The problem is because You have taken button type=submit

Change input type='button'

<input type="button" name="submit" value="submit" class="button" onClick="validate()">

and submit form using javascript

document.getElementById("myForm").submit();

I case you want to validate only on submit then use

 event.preventDefault();

and then validate but after successful validation you have to submit the form using js or jq. JS method is given above and jq method is:

$("form").submit();

Solution 3:[3]

You should add return false; in your if code block if you dont want the redirect.

Its the browser's default to refresh the page when the form is submitted. To prevent this refresh, add return false;.

Learn more: return | MDN

Solution 4:[4]

<html>
    <head>
        <script>
        function validate(){
            if(document.getElementById("email").value != document.getElementById("confirm_email").value){
                alert("Email do no match");
                return false;
            }
        }
        </script>
    </head>
    <body>
        <form action="formsubmit.php" method="post" onsubmit="return validate()">
            <label for="department">Email ID</label>
            <input type="email" size="30" name="email" id="email" required />
            <label for="department">Confirm Email ID</label>
            <input type="email" size="30" name="cname" id="confirm_email" required />
            <input type="submit" name="submit" value="submit" class="button">
        </form>
    </body>
</html>

Solution 5:[5]

Use the below javascript code, your html code is correct!

Well executing the JavaScript code in StackOverflow Script Runner won't run and occur erorrs. If input boxes with email and confirm_email id(s) are declared, this should work.

Hope it could help!

function validate(){
  if(!document.querySelector("#email").value === document.querySelector("#confirm_email").value){
    alert("Email do not match.");
  }
}

/* In JavaScript, the ! keyword before the condition belongs to execute the statement if the given condition is false. */

Solution 6:[6]

Fix that and remove type=submit and use a function or use following code:

<script>
function check(){
//* Also add a id "submit" to submit button*//
document.querySelector("#submit").addEventListener("click", function(){
//* Perform your actions when that submit button will be clicked and close with this in next line*//
})</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Markus Müller
Solution 2
Solution 3
Solution 4 Vipin Kumar Soni
Solution 5 user16280919
Solution 6

Related Questions