当我提交空字段时，输入不会变成红色，也不会打印错误消息。当我使用此代码发送空字段时，如何显示错误消息并使输入框变为红色。
<?php
if ( !empty($_POST)) {
require 'db.php';
// validation errors
$fnameError = null;
$lnameError = null;
$ageError = null;
$genderError = null;
// post values
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$age = $_POST['age'];
$gender = $_POST['gender'];
// validate input
$valid = true;
if(empty($fname)) {
$fnameError = 'Please enter First Name';
$valid = false;
}
if(empty($lname)) {
$lnameError = 'Please enter Last Name';
$valid = false;
}
if(empty($age)) {
$ageError = 'Please enter Age';
$valid = false;
}
if(empty($gender)) {
$genderError = 'Please select Gender';
$valid = false;
}
// insert data
if ($valid) {
$PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO users (fname,lname,age,gender) values(?, ?, ?, ?)";
$stmt = $PDO->prepare($sql);
$stmt->execute(array($fname,$lname,$age,$gender));
$PDO = null;
header("Location: index.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="row">
<h3>Create a User</h3>
</div>
<form method="POST" action="create.php">
<div class="form-group <?php echo !empty($fnameError)?'has-error':'';?>">
<label for="inputFName">First Name</label>
<input type="text" class="form-control" required="required" id="inputFName" value="<?php echo isset($fname)?$fname:'';?>" name="fname" placeholder="First Name">
<span class="help-block"><?php echo isset($fnameError)?$fnameError:'';?></span>
</div>
<div class="form-group <?php echo !empty($lnameError)?'has-error':'';?>">
<label for="inputLName">Last Name</label>
<input type="text" class="form-control" required="required" id="inputLName" value="<?php echo isset($lname)?$lname:'';?>" name="lname" placeholder="Last Name">
<span class="help-block"><?php echo isset($lnameError)?$lnameError:'';?></span>
</div>
<div class="form-group <?php echo !empty($ageError)?'has-error':'';?>">
<label for="inputAge">Age</label>
<input type="number" required="required" class="form-control" id="inputAge" value="<?php echo isset($age)?$age:'';?>" name="age" placeholder="Age">
<span class="help-block"><?php echo isset($ageError)?$ageError:'';?></span>
</div>
<div class="form-group <?php echo !empty($genderError)?'has-error':'';?>">
<label for="inputGender">Gender</label>
<select class="form-control" required="required" id="inputGender" name="gender" >
<option></option>
<option value="male" <?php echo isset($gender)?'selected':'';?>>Male</option>
<option value="female" <?php echo isset($gender)?'selected':'';?>>Female</option>
</select>
<span class="help-block"><?php echo isset($genderError)?$genderError:'';?></span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success">Create</button>
<a class="btn btn btn-default" href="index.php">Back</a>
</div>
</form>
</div> <!-- /row -->
</div> <!-- /container -->
</body>
</html>
注意：
- 如果用户提交的表单包含除性别之外的空字段，它将返回 true 并转到您的插入语句。它将覆盖每个
if()语句中$valid变量的值。
您可以尝试这样做来为$valid变量分配值：
if(empty($fname) || empty($lname) || empty($age) || empty($gender)){
$valid = "false";
}
else {
$valid = "true";
}
- 由于输入字段上的
required = "required"属性，您的表单也将返回 false，因此表单不会提交，您将无法看到条件的结果。
附加说明：
- 您还可以使用javascript来实现您想要的内容，而无需提交表单
如果你想要一个javascript的例子，我可以给你一个例子。
首先，我们希望为您的div分配唯一的id属性，input fields和<span>。我们应该首先将错误消息隐藏在您的<span>
以下是您的名字字段的示例：
<div class="form-group" id="firstnamediv">
<label for="inputFName">First Name</label>
<input type="text" class="form-control" id="firstnamefield" name="fname" placeholder="First Name">
<span class="help-block" id="firstnamespan" style="display:none">Please enter First Name</span>
</div>
然后创建你的JavaScript。（请注意javascript区分大小写）：
<script type="text/javascript">
function validateForm(){
var firstname = document.getElementById('firstnamefield').value;
if(firstname == ''){
document.getElementById('firstnamediv').className = 'form-group has-error';
document.getElementById('firstnamespan').style.display = 'block';
return false;
}
else if(firstname != ''){
document.getElementById('firstnamediv'.className = ''form-group has-success';
document.getElementById('firstnamespan').style.display = 'none';
}
}
</script>
然后，要调用我们创建的 javascript 函数，我们必须在您的<form>上设置一个 onsubmit 属性
<form method="POST" action="create.php" onsubmit="return validateForm();">