print out div in JavaScript if return false

Question

index.php

 <body align="center">
    <form  action="index2.php" method="post" onsubmit="return ValidateEmail()">
    <div class="container">
    <h1> TEST </h1>
    <br>
        <label><a href="">LOG IN WITH FACEBOOK</a></label>
        <br>
        <br>
        <label><a href="">CHANGE FACEBOOK ACCOUNT</a></label>
        <br>
        <br>
        <label><input id="Username" type="text" placeholder="name" name="name" maxlength="30"/></label>
        <br>
        <br>
        <label><input id="Useremail" type="text" placeholder="email" name="email"/></label>
        <br>
        <br>
        <label>
        <select name="gender">
        <option value="male">male</option>
        <option value="female">female</option>
        </select>
        </label>
        <br>
        <br>

        <input type="submit" name="submit" value="Sign Up"/>
    </form><!--end of form -->
</body>

JavaScript

 <script type="text/javascript">

function IsValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email);
};

function ValidateEmail() {
var email = document.getElementById("Useremail").value;
if (!IsValidEmail(email)) {
    // alert("Invalid email address.");
    return false;
    !-- print out div that show this alert text-->
    }
    else {
    return true;
    !-- else return true dont submit the post-->
    }
}

</script>

my intention is when the user dont enter or enter wrong email , it will pop a text or a box in html div and telling them they didt entering the right email , how i going to make javasctrip print out a div your email is invalid ?? if return true submit post else not posted. and i dont wanted to use jquery. thank you

add a div in the form and give error messages – aΨVaN Dec 29 '14 at 07:12 — aΨVaN, Dec 29 '14 at 07:12

score 1 · Accepted Answer · answered Dec 29 '14 at 07:11

Add A Div for pop text like this

<div id="emailMessage"></div>

Then replace your JavaScript code with this

function IsValidEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
};

function ValidateEmail() {
        var email = document.getElementById("Useremail").value;
        if (!IsValidEmail(email)) {
                document.getElementById("emailMessage").innerHTML = "Invalid email address.";
                //alert("Invalid email address.");
                return false;
        } else {
               document.getElementById("emailMessage").innerHTML = "";
                return true;
        }
}

score 0 · Answer 2 · answered Dec 29 '14 at 07:13

You must create an error message in <div> with the attribute hidden.

<div id="errorMessage" hidden>
    Error message here...
</div>

The hidden attribute makes the element to be hidden.

If the user enters invalid email, you can set the hidden of that div error message to false.

document.getElementById("errorMessage").hidden=false;

Place that code after/before the return false; of your javascript.

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

An easier alternative would be to use the HTML5 validation of the email input as suggested in this SO-thread: HTML5 Email Validation.

Just use input type email and the validation will be handled by the browser:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

edited May 23 '17 at 10:33

Community

1
1

answered Dec 29 '14 at 07:13

Maffelu

2,018
4
24
35

score 0 · Answer 4 · answered Dec 29 '14 at 07:39

You can reffer the foolowing sample code used "" to dispaly the error message.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

function IsValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email); 
}

function myFunction() {

var email = document.getElementById("Useremail").value;


if (!IsValidEmail(email)) {
    document.getElementById("errorMsg").innerHTML = "Invalid email address.";   
      window.stop();
      return false;
   <!-- print out div that show this alert text-->
    }
    else {
     document.getElementById("errorMsg").innerHTML = "";
    return true;
    <!-- else return true dont submit the post-->
    }  
}

</script>


    <form   method="post"  action="index2.php" onsubmit="return myFunction()" >
    <div class="container">
    <h1> AUG SWIFT TEST </h1>
    <br>
        <label><a href="">LOG IN WITH FACEBOOK</a></label>
        <br>
        <br>
        <label><a href="">CHANGE FACEBOOK ACCOUNT</a></label>
        <br>
        <br>
        <label><input id="Username" type="text" placeholder="name" name="name" maxlength="30"/></label>
        <br>
        <br>
        <label><input id="Useremail" type="text" placeholder="email" name="email"/></label><div id="errorMsg"></div>
        <br>
        <br>
        <label>
        <select name="gender">
        <option value="male">male</option>
        <option value="female">female</option>
        </select>
        </label>
        <br>
        <br>

        <input type="submit" onClick="myFunction()" name="submit" value="Sign Up"/>
    </form><!--end of form -->
</body>

</html>

print out div in JavaScript if return false

4 Answers4