Question

如果在按下SUBMIT按钮时出现错误，如何以红色更改输入框的颜色？

<form method="post" action="" ">
        <h3>Add users</h3>

        <div class="form-group <?php echo (!empty($error_user) || ($error_taken)) ? 'has-error' : ''; ?>">
  <strong>Username: *</strong>
  <input type="text" name="username" value="<?php echo $username; ?>" />
  <span class="error"><?php echo $error_user; ?></span><br/>
  <span class="error"><?php echo $error_taken; ?></span><br/>
  </div>

  <div class="form-group <?php echo (!empty($error_name)) ? 'has-error' : ''; ?>">
    <strong>Name: *</strong>
    <input type="text" name="name" value="<?php echo $name; ?>" />
    <span class="error"><?php echo $error_name; ?></span> <br/>
  </div>

  <div class="form-group <?php echo (!empty($error_pass)) ? 'has-error' : ''; ?>">
    <strong>Password: *</strong>
    <input type="text" name="password" value="<?php echo $password; ?>" />
    <span class="error"><?php echo $error_pass; ?></span> <br/>
  </div>

  <input type="submit" name="submit" value="Add">

</form>

Answer 1

您可以使用简单的CSS

.form-group.has-error input {
  border: 1px solid red;
}

Answer 2

您有两种不同的CSS选项。

首次使用：

.has-error input{
border: 1px solid red;
}
.has-error .error{
color:red;
}

第二

.has-error>input{
border: 1px solid red;
}
.has-error>.error{
color:red;
}

只需应用任何CSS，你就可以了。第二个会在input课程中找到error和课程has-error。如果有另一个<div>覆盖它们，那么它将无效。

如果您想检查错误并显示错误并更改颜色等，那么您必须使用AJAX

Answer 3

您可以使用javascript或jquery使用ajax发送POST请求来处理

之前你可以创建错误处理函数

提交单击时出现错误时更改输入的颜色

3 个答案: