Execute PHP Submit button Only if Javascript is true

Question

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.

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
– Epodax, Commented Dec 22, 2015 at 8:14

Danyal Sandeelo · Accepted Answer · 2015-12-22 08:16:48Z

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()"

to

 onsubmit="return CheckTerms()"

answered Dec 22, 2015 at 8:16

Danyal Sandeelo

12.4k10 gold badges57 silver badges90 bronze badges

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

2 Comments

Jijo Nair Over a year ago

Thank you. That Solved the issue. But as you can see, I have used the patterns to match email and alphabet patterns, it is not working too. It just check the blank space. the first condition is not checked.

Danyal Sandeelo Over a year ago

Will have to check regex but for email you can do it using html5. type='email'

Collectives™ on Stack Overflow

Execute PHP Submit button Only if Javascript is true

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related