Question

当我提交空字段时，输入不会变为红色并且不会打印错误消息。当我使用此代码发送空字段时，如何显示错误消息并使输入框变为红色。

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

Answer 1

注意：

如果用户提交的表单除了性别以外都有空字段，它将返回true并转到您的insert语句。它将覆盖每个$valid语句中if()变量的值。

您可以尝试使用此选项来为$valid变量指定值：

if(empty($fname) || empty($lname) || empty($age) || empty($gender)){
  $valid = "false";
}
else {
  $valid = "true";
}

由于您输入字段中的required = "required"属性，您的表单也会返回false，因此表单将无法提交，您将无法查看条件的结果。

附加说明：

您也可以使用javascript来实现您想要的效果而无需提交表单

如果您想要一个javascript示例，我可以举个例子。

首先，我们要为您的id，div和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函数，我们必须在onsubmit

上设置<form>属性

<form method="POST" action="create.php" onsubmit="return validateForm();">

Bootstrap＆＃39; form-group has-error＆＃39;不使用PHP代码

1 个答案:

注意：

附加说明：