当我在表单中填写一两个字段并单击注册按钮时,它仍然会提交这些值。在表格中的所有字段完成之前,它不应该提交。我做错了什么???
我在顶部添加了一个<pre />
标签,这样我就可以检查输入了哪些值,这是我的代码:
文件开始-PHP:
<?php
$error_array = array();
$fname = $lname = $email = $dob = $Mchecked = $gender = $Fchecked = $hobbies ="";
if(isset($_POST["sbt_save"]))
{
echo '<pre>'; print_r($_POST); echo "</pre>";
if($_POST['fname']=="")
{
$err ="Please Enter your first name"."<br>";
array_push($error_array,$err);
}
else
{
$fname = test_input($_POST['fname']);
}
if($_POST['lname']=="")
{
$err ="Please Enter your last name"."<br>";
array_push($error_array,$err);
$submit_Ornot_submit = true;
}
else
{
$lname = test_input($_POST["lname"]);
}
if($_POST['email']=="")
{
$err ="Please Enter your email"."<br>";
array_push($error_array,$err);
}
else
{
$email_Value = $_POST['email'];
$position_Of_at = strpos("$email_Value","@");
$position_Of_dot = strpos("$email_Value",".");
if($position_Of_at == -1 || $position_Of_dot == -1 || ($position_Of_at + 2) >= $position_Of_dot )
{
$err = "Please enter valid Email"."<br>";
array_push($error_array,$err);
}
else
{
$email = test_input($_POST["email"]);
}
}
if($_POST['dob']=="")
{
$err ="Please Enter your date of birth"."<br>";
array_push($error_array,$err);
}
else
{
$dob = test_input($_POST["dob"]);
}
if(!isset($_POST["gender"]))
{
$err ="Please select gender"."<br>";
array_push($error_array,$err);
}
else
{
$gender = $_POST["gender"];
if ($gender == "Male")
{
$Mchecked = "checked";
}
else if ($gender == "Female")
{
$Fchecked = "checked";
}
}
if(!isset($_POST['hobbies']))
{
$err ="Please Enter your hobbies"."<br>";
array_push($error_array,$err);
}
else
{
$hobbies = test_input($_POST['hobbies']);
}
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
继续-HTML&PHP和Javascript:(此代码是同一个文件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ragistration Form</title>
<link rel="stylesheet" type="text/css" href="ragistration_form.css">
<script src="jquery-2.2.1.min.js"></script>
<script>
/*
$(document).ready(function(event)
{
$(".sbt_button").click(function(event)
{
var error_arr = [];
var email_value = $("#email").val();
var position_of_at = email_value.indexOf('@');
var position_of_dot = email_value.lastIndexOf('.');
if($("#fname").val() == null || $("#fname").val() == "")
{
var err = "First Name";
error_arr.push(err);
}
if($("#lname").val() == null || $("#lname").val() == "")
{
var err = "Last Name ";
error_arr.push(err);
}
if(position_of_at == -1 || position_of_dot == -1 || (position_of_at + 2) >= position_of_dot )
{
var err = "Email ";
error_arr.push(err);
}
if($("#dob").val() == null || $("#dob").val() == "")
{
var err = "Date of Birth ";
error_arr.push(err);
}
if(!$("input[type='radio']").is(":checked"))
{
var err = "Gender ";
error_arr.push(err);
}
if(!$("input[type='checkbox']").is(":checked"))
{
var err = "Hobbies ";
error_arr.push(err);
}
if(error_arr.length !=0)
{
event.preventDefault();
alert(error_arr);
}
});
});
*/
</script>
</head>
<body>
<form class="form" name="myForm" action="" method="POST">
<table>
<tr>
<p class="heading">Ragistration Form</p>
</tr>
<?php
if($error_array !="")
{
foreach($error_array as $value)
{
echo "<tr style='color:red;'><td> ". $value. "</td></tr>";
}
}
?>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="field_Name">First Name :<b style="color:red">*</b></td>
<td><input type="text" name="fname" id="fname" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Last Name :<b style="color:red">*</b></td>
<td><input type="text" name="lname" id="lname" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Email :<b style="color:red">*</b></td>
<td><input type="text" name="email" id="email" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Date of Birth :<b style="color:red">*</b></td>
<td><input type="date" name="dob" id="dob" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Gender :<b style="color:red">*</b></td>
<td><input type="radio" name="gender" value="Male"class="inputfield_Name" <?php echo $Mchecked;?> />Male
<input type="radio" name="gender" value="Female" <?php echo $Fchecked;?> />
Female</td>
</tr>
<tr>
<td class="field_Name">About Yourself :</td>
<td><textarea name="abt" class="inputfield_Name"$></textarea></td>
</tr>
<tr>
<td class="field_Name">Hobbies :<b style="color:red">*</b></td>
<td><input name="hobbies" value="Cricket" type="checkbox" id="hobbies" class="inputfield_Name" />
Cricket
<input name="hobbies" value="Singing" type="checkbox" />
Singing
<input name="hobbies" value="Travling" type="checkbox" />
Travling</td>
<tr>
<td></td>
<td><input name="hobbies" value="Writing" type="checkbox" class="inputfield_Name" />
Writing
<input name="hobbies" value="Teaching" type="checkbox" />
Teaching
<input name="hobbies" value="Driving" type="checkbox" />
Driving </td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Ragister" name="sbt_save" class="sbt_button"/></td>
</td>
</tr>
</table>
</form>
</body>
</html>
您的WorkableHTML+Jquery代码和PHP的其余代码都可以。PHP不阻止表单提交。您可以通过HTML(required
字段)和Jquery阻止表单提交
$(document).ready(function(event)
{
$(".sbt_button").click(function(event)
{
var error_arr = [];
var email_value = $("#email").val();
var position_of_at = email_value.indexOf('@');
var position_of_dot = email_value.lastIndexOf('.');
if($("#fname").val() == null || $("#fname").val() == "")
{
var err = "First Name";
error_arr.push(err);
}
if($("#lname").val() == null || $("#lname").val() == "")
{
var err = "Last Name ";
error_arr.push(err);
}
if(position_of_at == -1 || position_of_dot == -1 || (position_of_at + 2) >= position_of_dot )
{
var err = "Email ";
error_arr.push(err);
}
if($("#dob").val() == null || $("#dob").val() == "")
{
var err = "Date of Birth ";
error_arr.push(err);
}
if(!$("input[type='radio']").is(":checked"))
{
var err = "Gender ";
error_arr.push(err);
}
if(!$("input[type='checkbox']").is(":checked"))
{
var err = "Hobbies ";
error_arr.push(err);
}
if(error_arr.length !=0)
{
event.preventDefault();
alert(error_arr);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form" name="myForm" action="" method="POST">
<table>
<tr>
<p class="heading">Ragistration Form</p>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="field_Name">First Name :<b style="color:red">*</b></td>
<td><input type="text" name="fname" id="fname" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Last Name :<b style="color:red">*</b></td>
<td><input type="text" name="lname" id="lname" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Email :<b style="color:red">*</b></td>
<td><input type="text" name="email" id="email" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Date of Birth :<b style="color:red">*</b></td>
<td><input type="date" name="dob" id="dob" class="inputfield_Name" /></td>
</tr>
<tr>
<td class="field_Name">Gender :<b style="color:red">*</b></td>
<td><input type="radio" name="gender" value="Male"class="inputfield_Name" />Male
<input type="radio" name="gender" value="Female" />
Female</td>
</tr>
<tr>
<td class="field_Name">About Yourself :</td>
<td><textarea name="abt" class="inputfield_Name"$></textarea></td>
</tr>
<tr>
<td class="field_Name">Hobbies :<b style="color:red">*</b></td>
<td><input name="hobbies" value="Cricket" type="checkbox" id="hobbies" class="inputfield_Name" />
Cricket
<input name="hobbies" value="Singing" type="checkbox" />
Singing
<input name="hobbies" value="Travling" type="checkbox" />
Travling</td>
<tr>
<td></td>
<td><input name="hobbies" value="Writing" type="checkbox" class="inputfield_Name" />
Writing
<input name="hobbies" value="Teaching" type="checkbox" />
Teaching
<input name="hobbies" value="Driving" type="checkbox" />
Driving </td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Ragister" name="sbt_save" class="sbt_button"/></td>
</td>
</tr>
</table>
</form>
您可以使用PHP直接管理jquery,而不是jquery。
只需尝试检查NULL条件即可。这是代码。
if($_POST['fname']=="" || $_POST['fname']==null)
{
$err ="Please Enter your first name"."<br>";
array_push($error_array,$err);
}
else
{
$fname = test_input($_POST['fname']);
}
或者,如果希望使用HTML,只需在输入类型中添加required
属性即可。
就像:
<input type="text" name="fname" id="fname" required>
1.在检查提交按钮是否点击之前,检查是否有任何文本框为空
if( isset($_POST['fname']) &&
isset($_POST['lname']) &&
isset($_POST['email']) &&
isset($_POST['dob']) &&
isset($_POST["gender"]) &&
isset($_POST['hobbies'])
) {
//your php code here
} else { echo "Please complete the form"; }
2.使用Javascript表单验证
<form class="form" name="myForm" action="" method="POST" onsubmit="return validateForm();">
<script>function validateForm() {
//your form validation code here
} </script>
您需要检查表单值。所以这样做吧。
下
if(isset($_POST["sbt_save"]))
{
将此代码放入
if($_POST['dob']=="" || $_POST['email']=="" || $_POST['lname']=="" || $_POST['gender'] == ""]){
$err ="Please Enter all form fields"."<br>";
array_push($error_array,$err); }else{
剩下的代码。。。
还可以查看jquery验证器插件。一些浏览器,如mobile safari,无法识别所需的标签,将提交表单。
要停止提交表单,您必须使用浏览器端验证,即使用jquery验证或简单的javascript。
或者另一种方法是使用HTML5验证,即输入字段中的必需属性。
这将停止您的表单提交,直到您的所有字段都被填充并验证为止。
在使用服务器端验证之后,检查是否有任何字段为空,然后返回并突出显示该特定字段。