提交后更改空输入边框

时间:2016-10-26 19:16:07

标签: php html css

如果此人单击提交按钮并将输入/ textarea留空,我希望如此。我希望它将现在的灰色边框更改为红色(无论哪个输入都是空的)。

我目前的代码:

if(empty($_POST['email']) ||
   empty($_POST['name']) ||
   empty($_POST['message']) ||
   empty($_POST['pref-job']) ||
   empty($_POST['username']))
{
    echo "<style type='text/css'>
            input {
                border: thin solid #e51923;
            }
            textarea {
                border: thin solid #e51923;
            }
          </style>";
}

2 个答案:

答案 0 :(得分:0)

您可以使用php执行此操作,但更好的选择是使用HTML5。

required属性将停止提交,如果未填充,则突出显示该字段为红色。

<input type="email" name="email" required="required" />

请注意,这仅适用于那些实现HTML5的浏览器,不应依赖于验证。您仍应验证服务器端。在这种情况下,我建议在输入字段中添加一个类,以表明它在php中无效 - 类似于:

if (empty($_POST['email'])) {
    $emailClass = 'validationFailed';
} else {
    $emailClass = '';
}
printf('<input type="email" name="email" class="%s" />', $emailClass);

要实现这一点,您还需要定义validationFailed课程 - 就像您的问题一样:

.validationFailed {
    border: thin solid #e51923;
}

答案 1 :(得分:0)

由于HTML require和PHP empty()都可以绕过space

$email = null;
$name = null;
$message = null;
$pref_job = null;
$username = null;

if ($_POST) {

   $error = false;
   if(trim($_POST['email']) == false) {
        $email = 'failed';
        $error = true;
    }
    if (trim($_POST['name']) == false) {
        $name = 'failed';
        $error = true;
    }
    if (trim($_POST['message']) == false) {
        $message = 'failed';
        $error = true;
    }
    if (trim($_POST['pref_job']) == false) {
        $pref_job = 'failed';
        $error = true;
    }
    if (trim($_POST['username']) == false) {
        $username = 'failed';
        $error = true;
    }
    if ( ! $error) {

        //passed all basic validation
    } 
}
?>

<style type='text/css'>
.failed {
    border: thin solid #e51923;
}
</style>
<form method="post">
    <input type="text" name="email" class="<?php echo $email; ?>" /> <br />
     <input type="text"name="name" class="<?php echo $name; ?>"/> <br />
    <input type="text" name="message" class="<?php echo $message; ?>"/> <br />
    <input type="text" name="pref-job" class="<?php echo $pref_job; ?>"/> <br />
    <input type="text" name="username" class="<?php echo $username; ?>"/> <br />
    <input type="submit" value="Submit"/>
</form>

除非您想允许空space