Force HTML form validation via JavaScript

Question

I have created a HTML form which has two buttons (instead of a submit button), each programmatically sending the form to a unique form action address.

<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>

The scripts:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
    form.submit();
}
function form2() {
    form.action="example2.php";
    form.submit();
}

Work well, responding to which button you press. However, the same html form validation that worked before (when using a 'submit' button), no longer shows a hint and the form sends regardless of whether there is input or not.

I have read that because I am calling the form.submit() programmatically, it bypasses the onSubmit() function of a form, which is where the validation takes place.

My question is: Can I programmatically force the onSubmit() so that I get the validation pop up? I must make clear that I am NOT wanting to create a JavaScript form validation, i.e. using an alert; rather, use JavaScript to enforce the HTML validation as found here, when you click submit: https://jsfiddle.net/qdzxfm9u/

Answer 1

Maybe something like this :

var form = document.getElementById("formExample");

function form1() {
  form.action="example1.php";
}

function form2() {
  form.action="example2.php";
}

<form id="formExample">
  <input type="text" id="input1" required>
  <input type="submit" onClick="form1()" value="Form Action 1" />
  <input type="submit" onClick="form2()" value="Form Action 2" />
</form>

Answer 2

You can merely change your button's type to submit and drop the form.submit() from your JS part.

So the HTML part becomes:

<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>

This way, clicking any button does submit by itself, but before is executed the JS part:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
}
function form2() {
    form.action="example2.php";
}

---

EDIT

Warning: I originally based my solution on a copy of the OP HTML part, where the "pseudo-buttons" used a strange element <label type="input"...>, so I read (too quickly) as if it was <button type="button"...> and simply changed type from input to submit!
This way, it couldn't work as expected.

It is now corrected in the above code.

Answer 3

How about making a dropdown list - could be radio buttons instead - containing the form two actions with one submit button like in this JS Fiddle, then having one function on form submit

var form = document.getElementById("formExample"),
    select = document.getElementById("slct");

form.addEventListener('submit', function() {
  if (select.value == 1) {
    form.action = "example1.php";
  } else {
    form.action = "example2.php";
  }
  // alert for demo only
  alert(form.action);
  form.submit();
});

<form id="formExample">
  <input type="text" id="input1" required>
  <select id="slct" required>
    <option></option>
    <option value="1">Form Action 1</option>
    <option value="2">Form Action 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

Answer 4

function togglePassword(el){
     var checked = el.checked;
     if (checked) {
        document.getElementById("password").type = 'text';
        document.getElementById("toggleText").textContent= "Hide";
     } else {
        document.getElementById("password").type = 'password';
        document.getElementById("toggleText").textContent= "Show";
     }
  }

  function login()
  {
     var uname = document.getElementById("uname").value;
     var password = document.getElementById("password").value;
     if(uname === '')
     {
        alert("Please enter the user name.");
     }
     else if(password === '')
     {
        alert("Enter the password");
     }
     else
     {
        alert('Login Successful. Thank You!');
     }
  }

  function clearFunc()
  {
     document.getElementById("uname").value="";
     document.getElementById("password").value="";

<script type="text/javascript">
      function togglePassword(el){
         var checked = el.checked;
         if (checked) {
            document.getElementById("password").type = 'text';
            document.getElementById("toggleText").textContent= "Hide";
         } else {
            document.getElementById("password").type = 'password';
            document.getElementById("toggleText").textContent= "Show";
         }
      }

      function login()
      {
         var uname = document.getElementById("uname").value;
         var password = document.getElementById("password").value;
         if(uname === '')
         {
            alert("Please enter the user name.");
         }
         else if(password === '')
         {
            alert("Enter the password");
         }
         else
         {
            alert('Login Successful. Thank You!');
         }
      }

      function clearFunc()
      {
         document.getElementById("uname").value="";
         document.getElementById("password").value="";
      }  
   </script>     

/* heading  */
h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    /* padding: 0% 1% 3% 6.5%; */
    margin: 0% 35% -10% 36%;
}


h1:hover{
  color:#4499d9 ;
  transform: translateY(-5px);
}


/* bg image */
body {
  background-image: url('img/bg4.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}


/* Bordered form */
form {
 /*  border: 13px solid black; */
  width: 27%;
  height: auto;
  position: absolute;
  left: 10%;
  margin-left: -3px;
  top: 18%;
}

/* Full-width inputs */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #17234b;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 49%;
}

/* Add a hover effect for buttons */
button:hover {
  background-color: #4499d9;
   transform: translateY(-5px);
  box-shadow: 1px 3px 7px #6f6d72;
}

#toggleText {
    display: block;
}


/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
     width: 30%;
    border-radius: 20%;
     box-shadow: 1px 3px 9px #6f6d72;
}

img.avatar:hover{
   transform: translateY(-5px);
  box-shadow: 7px 9px 9px #6f6d72;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

span.buttons{
    width: 100%;
    display: flow-root;
}

#toggleText{
  float: left;
}

#toggle{
  float: left;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <h1>LOGIN PANEL</h1>
   <!-- Login Form -->
   <div class="form"> 
      <form >
         <div class="imgcontainer">
            <img src="img/Login.jfif" alt="Login Avatar" class="avatar">
         </div>
         <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" id="uname" name="uname"/>
            <label for="password"><b>Password</b></label>
            <input type='password'placeholder="Enter Your Password" name="password" id='password'/>
            <input type='checkbox' id='toggle' onchange='togglePassword(this)'><span id='toggleText'>Show</span>
            <span class="buttons">
               <button type="submit" value="Reset" onclick="clearFunc()" class="btn">Reset</button>
               <button type="submit" value="Login" class="btn" onClick="login()">Login</button>
            </span>
         </div>
      </form>
   </div> 


 
</body>
</html>