2015-12-22 21 views
2

我想执行使用PHP窗体的mysql查询。下面是形式执行PHP提交按钮只有当Javascript为真

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

我在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 =/^\[email protected][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 
} 

?> 

但问题是,即使是JavaScript的返回错误,点击提交按钮,执行PHP脚本,将数据输入数据库。如果存在任何javascript错误,我想停止表单提交。

+0

至于我可以不使用'event.preventDefault(见);'你的JS。尝试一下,它应该停止表单提交。 – Epodax

+0

错误为false时比使用form.submit(); – devpro

回答

8

即使您在函数中执行该操作,也不会在事件中返回布尔值。 onSubmit默认收到true并提交。

变化

onsubmit="CheckTerms()" 

onsubmit="return CheckTerms()" 
+0

谢谢。解决了这个问题。但是,正如你所看到的,我已经使用这些模式来匹配电子邮件和字母模式,但它并不工作。它只是检查空白。第一个条件没有被检查。 –

+0

必须检查正则表达式,但对于电子邮件,您可以使用html5来完成。类型=“电子邮件” –