JS script running via HTML button

Question

So I'm new to the programing world and I've been busting my head around this situation that I can't seem to figure out.. I have an HTML button and a function (if - else) and I want the function to "stop" and show the error when the input is not according to the format I want for the input

<script type="text/javascript" src="../Scripts/script.js"></script>

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  var a = document.getElementById("nume").value;
  var b = document.getElementById("email").value;
  var c = document.getElementById("produs").value;

  if (a.match(numecomplet)){
    document.getElementById("nume").innerHTML = "";
  }else {
    document.getElementById("numegresit").innerHTML = "Nume incorect";
  }

  if (b.match(formatemail)){
    document.getElementById("email").innerHTML = "";
  } else {
    document.getElementById("emailgresit").innerHTML = "Email incorect";
  }
  
  if (c.match(numeprodus)) {
    document.getElementById("produs").innerHTML = "";
 } else {
    document.getElementById("prodgresit").innerHTML = "Nume produs incorect";
 }
}

<form>
  <label for="nume">Nume:</label>
      <input type="text" id="nume" name="nume" value="";><br>
          <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">Email:</label>
      <input type="email" id="email" name="email" autocomplete="on" value="";><br>
          <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">Produs:</label>
      <input type="text" id="produs" name="produs" value="";><br>
          <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button onclick="checkform()"> Submit </button>
</form>

I tried:

• button > onclick=submit instead of onclick=checkform;
• return false; at the end of the syntax (prior to last {}), after each else syntax
• return true; + return false; after if, respectively else
• without <form></form>

Also tried looking on Google, but since I'm newbie level some of the solutions seem too advanced and didn't understand much from them.

So I hope I can be clear enough with what I want the webpage to display... I want to see error text from <p> to stay on the webpage when else is "true", but the behavior I have now is that I see the text, but after that the page sort of reloads and the text disappears.

Answer 1

You should use an event listener and prevent default for that, like this:

document.querySelector('button').addEventListener('click', (event) => {

      // Prevent submitting of the form

      event.preventDefault();

      // Validate

      if(checkform()){
 
           // Only submit it if it is valid
 
           document.querySelector('form').submit();
 
      }
 
});

For an interactive example see this implementation. Please note that I am using the if conditions and regex you provided, they may need some tweaking, i.e. the return value of the checkform function decides whether to submit the form (reload) or not.

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  var a = document.getElementById("nume").value;
  var b = document.getElementById("email").value;
  var c = document.getElementById("produs").value;

  if (a.match(numecomplet)){
    document.getElementById("nume").innerHTML = "";
  }else {
    document.getElementById("numegresit").innerHTML = "Nume incorect";
  }

  if (b.match(formatemail)){
    document.getElementById("email").innerHTML = "";
  } else {
    document.getElementById("emailgresit").innerHTML = "Email incorect";
  }
  
  if (c.match(numeprodus)) {
    document.getElementById("produs").innerHTML = "";
 } else {
    document.getElementById("prodgresit").innerHTML = "Nume produs incorect";
 }
 
 // Return true or false based on your desired critera for validity
 
 return a.match(numecomplet) && b.match(formatemail) && c.match(numeprodus);
 
}

document.querySelector('button').addEventListener('click', (event) => {

     // Prevent submitting of the form

     event.preventDefault();

     // Validate

     if(checkform()){
     
          // Only submit it if it is valid
     
          document.querySelector('form').submit();
     
     }
     
});

<form>
  <label for="nume">Nume:</label>
      <input type="text" id="nume" name="nume" value="";><br>
          <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">Email:</label>
      <input type="email" id="email" name="email" autocomplete="on" value="";><br>
          <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">Produs:</label>
      <input type="text" id="produs" name="produs" value="";><br>
          <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button onclick="checkform()"> Submit </button>
</form>