Execute PHP Submit button Only if Javascript is true

I am trying to execute the mysql query using PHP form. Below is the form

<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="signup.css" type="text/css">
        <script type="text/javascript" src="form_val.js"></script>
        <title>Untitled Document</title>
        </head>
        <body bgcolor="#0ca3d2">
        <div align="right">
        <h2><a href="index.php">Go back</a></h2>
        </div>
        <div class="form-style-10">
        <h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>

        <form action="#" method="post" name="myForm" onSubmit="CheckTerms()">
        <div class="section"><span>1</span>First Name &amp; Address</div>
        <div class="inner-wrap">
        <input type="text" name="First_Name" placeholder="Enter First Name" id="fname">
        <label id="error" style="color:red"></label>
        <input type="text" name="Last_Name" placeholder="Enter last Name"/>
        <label id="error_l" style="color:red"></label>
        <select name="gender">

        <option value="Male">Male</option>
        <option value="Female">Female</option>
        </select>
        </div>
        <div class="section"><span>2</span>Email </div>
        <div class="inner-wrap">
        <input type="text" name="Email_i" placeholder="enter email here" id="e_mail" />
        <label id="error_e" style="color:red"></label>
        <button type="button" name="validate" onclick="loadDoc(this.value)">Validate</button>
        <div id="check"></div></div>
        <div class="section"><span>3</span>Passwords</div>
        <div class="inner-wrap">
        <input type="password" name="pass" placeholder="Must be 6 to 15 characters" id="Pass" onBlur="PassCheck()" />
        <label id="error_p" style="color:red"></label>
        <input type="password" name="repass" placeholder="Retype Password" id="RePass"/>
        <label id="error_rp" style="color:red"></label>
        <span class="privacy-policy">
        <input type="checkbox" name="terms" value="value1" id="check_box">Agree to Terms and Conditions
        </span>
        <input type="submit" name="signup" value="Register" id="sub_button">
        <label id="error_lable" style="color:red"></label>
        </div>
        </form>
        </div>
        </body>

I have the below form validation in Javascript,

function CheckTerms(){
        var letter = /^[a-zA-Z ]*$/;
        if(document.myForm.First_Name.value.match(letter) && document.myForm.First_Name.value =="")
        {
        document.getElementById("error").innerHTML =  "* Please Provide First Name";
        document.myForm.First_Name.focus();
        return false;
        }


        if(document.myForm.Last_Name.value.match(letter) && document.myForm.Last_Name.value =="" )
        {
        document.getElementById("error_l").innerHTML =  "* Please provide your Last name!";
        document.myForm.Last_Name.focus() ;
        return false;
        }


        var email =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        if(document.myForm.Email_i.value.match(email) && document.myForm.Email_i.value=="")
        {
        document.getElementById("error_e").innerHTML =  "* Please provide your EMAIL!"; 
        document.myForm.Email_i.focus() ;
        return false;
        }


        var min = 6;
        var max = 15;

        if(document.myForm.pass.value.length < min || document.myForm.pass.value.length > max)
        {
        document.getElementById("error_p").innerHTML =  "Password Should be betweeen 6 to 15 characters"; 
        document.myForm.pass.focus() ;
        return false;
        }


        var pass = document.getElementById("Pass").value;
        var re = document.getElementById("RePass").value;

        if(pass != re)
        {
        document.getElementById("error_rp").innerHTML =  "Password do not match";             
        return false;
        }

        if(document.getElementById("check_box").checked == false)
        {
          document.getElementById("error_lable").innerHTML =  "Please Check";
          return false;             
        }}

  <?php 
session_start();
include "config.php"; 
if(isset($_POST['signup']))
{
//     my logic here
}

?>

but the problem is, even the javascript returns the error, clicking the submit button , executes PHP script resulting the data entry into database. I want to stop form submission if any of the javascript error exists.

I am trying to execute the mysql query using PHP form. Below is the form

<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="signup.css" type="text/css">
        <script type="text/javascript" src="form_val.js"></script>
        <title>Untitled Document</title>
        </head>
        <body bgcolor="#0ca3d2">
        <div align="right">
        <h2><a href="index.php">Go back</a></h2>
        </div>
        <div class="form-style-10">
        <h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>

        <form action="#" method="post" name="myForm" onSubmit="CheckTerms()">
        <div class="section"><span>1</span>First Name &amp; Address</div>
        <div class="inner-wrap">
        <input type="text" name="First_Name" placeholder="Enter First Name" id="fname">
        <label id="error" style="color:red"></label>
        <input type="text" name="Last_Name" placeholder="Enter last Name"/>
        <label id="error_l" style="color:red"></label>
        <select name="gender">

        <option value="Male">Male</option>
        <option value="Female">Female</option>
        </select>
        </div>
        <div class="section"><span>2</span>Email </div>
        <div class="inner-wrap">
        <input type="text" name="Email_i" placeholder="enter email here" id="e_mail" />
        <label id="error_e" style="color:red"></label>
        <button type="button" name="validate" onclick="loadDoc(this.value)">Validate</button>
        <div id="check"></div></div>
        <div class="section"><span>3</span>Passwords</div>
        <div class="inner-wrap">
        <input type="password" name="pass" placeholder="Must be 6 to 15 characters" id="Pass" onBlur="PassCheck()" />
        <label id="error_p" style="color:red"></label>
        <input type="password" name="repass" placeholder="Retype Password" id="RePass"/>
        <label id="error_rp" style="color:red"></label>
        <span class="privacy-policy">
        <input type="checkbox" name="terms" value="value1" id="check_box">Agree to Terms and Conditions
        </span>
        <input type="submit" name="signup" value="Register" id="sub_button">
        <label id="error_lable" style="color:red"></label>
        </div>
        </form>
        </div>
        </body>

I have the below form validation in Javascript,

function CheckTerms(){
        var letter = /^[a-zA-Z ]*$/;
        if(document.myForm.First_Name.value.match(letter) && document.myForm.First_Name.value =="")
        {
        document.getElementById("error").innerHTML =  "* Please Provide First Name";
        document.myForm.First_Name.focus();
        return false;
        }


        if(document.myForm.Last_Name.value.match(letter) && document.myForm.Last_Name.value =="" )
        {
        document.getElementById("error_l").innerHTML =  "* Please provide your Last name!";
        document.myForm.Last_Name.focus() ;
        return false;
        }


        var email =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        if(document.myForm.Email_i.value.match(email) && document.myForm.Email_i.value=="")
        {
        document.getElementById("error_e").innerHTML =  "* Please provide your EMAIL!"; 
        document.myForm.Email_i.focus() ;
        return false;
        }


        var min = 6;
        var max = 15;

        if(document.myForm.pass.value.length < min || document.myForm.pass.value.length > max)
        {
        document.getElementById("error_p").innerHTML =  "Password Should be betweeen 6 to 15 characters"; 
        document.myForm.pass.focus() ;
        return false;
        }


        var pass = document.getElementById("Pass").value;
        var re = document.getElementById("RePass").value;

        if(pass != re)
        {
        document.getElementById("error_rp").innerHTML =  "Password do not match";             
        return false;
        }

        if(document.getElementById("check_box").checked == false)
        {
          document.getElementById("error_lable").innerHTML =  "Please Check";
          return false;             
        }}

  <?php 
session_start();
include "config.php"; 
if(isset($_POST['signup']))
{
//     my logic here
}

?>

Share Improve this question asked Dec 22, 2015 at 8:12 Jijo Nair 8482 gold badges11 silver badges32 bronze badges

As far as I can see you aren't using event.preventDefault(); in your JS. Try with that, it should stop the form submit. – Epodax Commented Dec 22, 2015 at 8:14
when error is false than use form.submit(); – devpro Commented Dec 22, 2015 at 8:18

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

You are not returning the boolean in the event even though you are doing it in the function. onSubmit receives true by default and submits it.

Change

onsubmit="CheckTerms()"

 onsubmit="return CheckTerms()"

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Execute PHP Submit button Only if Javascript is true - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)