Javascript message alert box

Question

I have this javascript code:

function validate()
{

    var email=document.getElementById('email').value;


    var emailRegex=/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
    var emailResult=emailRegex.test(email);
    alert("email:" +emailResult);
}

and the html part, on a form tag:

<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt">

I want to print a message everytime that the test of Regex returns false,but I don't want to use an alert box. How can I do this?

Form :

         <form id="registration" onsubmit="validate()">
                <h3>S'ENREGISTRER</h3>
                <label for="button">FULL NAME: </label>
                <small>*</small>
                <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
                <label for="button">LAST NAME:</label>
                <small>*</small>
                <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
                <label for="button">USERNAME:</label>
                <small>*</small>
                <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
                <label for="button">PASSWORD:</label>
                <small>*</small>
                <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
                <label id = "kjo" for="button">EMAIL:</label>
                <small>*</small>
                <input type="text" id="email" placeholder="EMAIL"><br><br>
                <input type="submit" value="REGISTER" id="butt" onclick="validate()">
                <p id="result"></p>
                <br><br>
                <a href="login.html">LOGIN</a>
            </form>

Answer 1

As the previous answer says, you can insert a tag to show the result, after each field you want to validate.

For email as you mentioned in question, I write the part of showing error message as below.

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for (var i = this.length - 1; i >= 0; i--) {
    if (this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
};

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function validate(event) {
  var emailInput = document.getElementById("email");
  var email = emailInput.value;

  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  if (!emailResult) {
    var errorDiv = document.getElementById("error");
    if (!errorDiv) {
      var div = document.createElement("div");
      div.innerHTML = "Insert a valid Email";
      div.classList.add("error");
      div.id = "error";
      insertAfter(div, emailInput);
      emailInput.classList.add("error-input");
    }
    event.preventDefault();
  } else {
    var errorDiv = document.getElementById("error");
    if (errorDiv) {
      errorDiv.remove();
      emailInput.classList.remove("error-input");
    }
  }
}

.error {
  color: red;
}

.error-input {
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px
}

<form id="registration" onsubmit="validate()">
  <h3>S'ENREGISTRER</h3>
  <label for="button">FULL NAME: </label>
  <small>*</small>
  <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
  <label for="button">LAST NAME:</label>
  <small>*</small>
  <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
  <label for="button">USERNAME:</label>
  <small>*</small>
  <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
  <label for="button">PASSWORD:</label>
  <small>*</small>
  <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
  <label id="kjo" for="button">EMAIL:</label>
  <small>*</small>
  <input type="text" id="email" placeholder="EMAIL"><br><br>
  <input type="submit" value="REGISTER" id="butt" onclick="validate(event)">
  <p id="result"></p>
  <br><br>
  <a href="login.html">LOGIN</a>

</form>

You can also write an event listener onchange or onmouseout or onfocusout for your fields for validating them immediately after each change.

Hope this helps.

Answer 2

One possibility would be to add a p tag (or div, span and so on), which serves as a "field" to show the result of the test.

In this case, I'm using a p tag. To print the result, I use innerText like this:

function validate() {

  var email = document.getElementById('email').value;


  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  //alert("email:" + emailResult);
  // Show result withing the added p tag
  document.getElementById('result').innerText = "email: " + emailResult;
}

<input type="text" id="email" placeholder="EMAIL"><br><br>
<input type="submit" value="REGISTER" id="butt" onclick="validate()">
<p id="result"></p>

PS: I also added the onclick attribute to your button, to fire the function when the button get's clicked.

---

Edit:

If you want to display the error message, after the form gets submitted, you might want to take a look at PHP. With JavaScript on the client side (what we are doing here), you can't achieve that.

One way to get around this problem, would be to prevent the form from submitting if the email is invalid:

function validate(event) { // Mind the "event" parameter here

  var email = document.getElementById('email').value;


  var emailRegex = /^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/;
  var emailResult = emailRegex.test(email);
  //alert("email:" + emailResult);

  // Check if the email is invalid. If not, dont' submit the form
  if (emailResult == false) {
    event.preventDefault(); // This line prevents the form from submitting
    document.getElementById('result').innerText = "email: " + emailResult;
  }
}

<form id="registration" onsubmit="validate(event)"> <!-- mind the "event" parameter here -->
  <h3>S'ENREGISTRER</h3> 
  <label for="button">FULL NAME: </label>
  <small>*</small>
  <input type="text" name="fname" id="fullname" placeholder="FULL NAME"><br><br>
  <label for="button">LAST NAME:</label>
  <small>*</small>
  <input type="text" name="lname" id="lastname" placeholder="LAST NAME"><br><br>
  <label for="button">USERNAME:</label>
  <small>*</small>
  <input type="text" name="uname" id="username" placeholder="USERNAME"><br><br>
  <label for="button">PASSWORD:</label>
  <small>*</small>
  <input type="password" name="pass" id="password" placeholder="PASSWORD"><br><br>
  <label id="kjo" for="button">EMAIL:</label>
  <small>*</small>
  <input type="text" id="email" placeholder="EMAIL"><br><br>
  <input type="submit" value="REGISTER" id="butt"> <!-- I removed the onclick attribute here because it's already in the form tag -->
  <p id="result"></p>
  <br><br>
  <a href="login.html">LOGIN</a>
</form>
<p id="result"></p>