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.
    }


}

If you change the button to type="submit" and put onclick="return val();" then the form will submit automatically unless your function returns false (as it does when validation fails). Just add action="reg.php" to the form element. — nnnnnn
– nnnnnn, Commented Sep 5, 2015 at 7:29

Shahzad Barkati · Accepted Answer · 2021-09-16 06:36:08Z

16

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

HTML CODE:

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

JAVASCRIPT CODE:

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;    // in failure case
    }        
    return true;    // in success case
}

edited Sep 16, 2021 at 6:36

answered Sep 5, 2015 at 7:33

Shahzad Barkati

2,5506 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhaval Marthak · Accepted Answer · 2015-09-05 07:32:50Z

3

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

answered Sep 5, 2015 at 7:32

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

1 Comment

Alejo_Blue Over a year ago

remember to add the action at <form action="your_file.php">

Mohammed Elhag · Accepted Answer · 2015-09-05 08:11:27Z

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;
     }
}

edited Sep 5, 2015 at 8:11

answered Sep 5, 2015 at 7:29

Mohammed Elhag

4,3201 gold badge12 silver badges19 bronze badges

6 Comments

Leo the lion Over a year ago

well, i have a question..in form you are using onsubmit and then you are using button type with onclick? can you please share little bit info with answer then it will be great..sorry for my question.

Mohammed Elhag Over a year ago

let me explain it , i did the answer like this now , some one sent to me something like if you approved some change , i considered like modifying just shape not the script , but he change it , so i edited to my original answer .

Leo the lion Over a year ago

but my question is you are calling function onsubmit when you are not using submit button..sorry m not good in php so asking..please don't mind..thanx

Mohammed Elhag Over a year ago

you are right , it should be type="submit" , I'll change it , thanks

Mohammed Elhag Over a year ago

sometimes , id don't go deep in code at such issue because i consider that the one who asked is covered , so i copied it as it is , but i was wrong , thanks

|

michelem · Accepted Answer · 2015-09-05 07:31:24Z

0

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();
    }
}

answered Sep 5, 2015 at 7:31

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

Countach · Accepted Answer · 2015-09-05 07:38:22Z

0

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>

edited Sep 5, 2015 at 7:38

answered Sep 5, 2015 at 7:31

Countach

6071 gold badge13 silver badges21 bronze badges

Collectives™ on Stack Overflow

Form submission after Javascript Validation

5 Answers 5

Comments

Demo

1 Comment

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related