Form submission after Javascript Validation

Question

I want to submit my form to a PHP file called reg.php after validating it using JavaScript . The HTML form is given below:

HTML Form:

<form method="post">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JavaScript Validation

The following is the JavaScript validation code:

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    }
    else{
        // I want to submit form if this else statement executes.
    }


}

Answer 1

Just add action="reg.php" in <form> and return val() functions on onclick , also make type="submit" to form submission, like:

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>

and just add return true; in else like:

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    }
    else{
        return true;
    }
}

Answer 2

You can submit it with form name in else section.

document.myForm.submit();

---

 var uname = document.getElementById('username').value;
 if (!uname) {
      document.getElementById("error").innerHTML = "Enter a username";
      return false;
 } else {
      document.myForm.submit(); // Form will be submitted by it's name
 }

Markup

<form method="post" name="myForm">.....</form>

Demo

Answer 3

HTML Code

<form method="post" onsubmit="return val()">
     <input type="text" id="username" name="username">       
     <button type="submit" >Sign Up</button>
 </form>

Javascript Code

function val(){

     var uname = document.getElementById('username').value;
     if(!uname){
         document.getElementById("error").innerHTML = "Enter a username";
         return false;
     }
     else{
         return true;
     }
}

Answer 4

Here is, you need to get the form element and submit() it, so you need to add the id to the form and the action attribute to the reg.php file:

JSFiddle

<form method="post" id="theForm" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JS:

function val() {
    var uname = document.getElementById('username').value;
    if (!uname) {
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    } else {
        document.getElementById('theForm').submit();
    }
}

Answer 5

You can put a return true statement in the else block and then change the form to this.

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>