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

Question

如果我点击提交按钮时出现错误，如何将输入框的颜色更改为红色？

<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

你可以用javascript或jquery使用ajax发送POST请求来处理这个问题

在此之前，您可以创建错误处理功能

Answer 3

您有两个不同的 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