CODEWITHSUNDEEP
javascriptphpjquery
mani
mani

Reputation: 446

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");
}

Upvotes: 0

Views: 645

Answers (7)

Ashish Agarwal
Ashish Agarwal

Reputation: 29

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. */

Upvotes: 0

Ashish Agarwal
Ashish Agarwal

Reputation: 29

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>

Upvotes: -1

Tintu C Raju
Tintu C Raju

Reputation: 2700

It must prevent the form to get submitted if the validation is failed. so 

       return validate();

must be there. So if the validate function returns a false value then it will stop the form to be submitted. If the validate function return true then the submission will be done.

      <form method='post' action='action.php'>      
        <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="return validate();">  
      </form>


<script>
    function validateEmail(email) { 
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    } 

     function validate(){
        if(!validateEmail(document.getElementById('email').value))
        {
             alert('Please enter a valid email');
             email.focus();
             return false;
        }
        else if(document.getElementById('email').value!=document.getElementById('confirm_email').value) {
            alert('Email Mismatch');
            confirm_email.focus();
            return false;
        }
            return true;
     }
    </script>

Upvotes: -1

Rahul Desai
Rahul Desai

Reputation: 15501

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

Upvotes: 1

user4544965
user4544965

Reputation:

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();

Upvotes: 1

Vipin Kumar Soni
Vipin Kumar Soni

Reputation: 834

<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>

Upvotes: 0

Markus M&#252;ller
Markus M&#252;ller

Reputation: 2641

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;
      }
}

Upvotes: 7

Related Questions