PHP注册表单:如果出现错误，使用红色边框输入

Question

我正在用PHP制作一个注册表单，我想做一些事情:如果用户没有正确地完成表单，除了错误消息之外，我还想用红色边框输入(如果有错误)。

我的注册表格(HTML部分)：

<?php if(!empty($errors)): ?>

<div class="flash-message error">
    <h3>You have not completed the form correctly. The error(s) come(s) from the following thing(s):</h3>
    <ol>
        <?php foreach($errors as $error): ?>
        <li>
            <p><?= $error; ?></p>
        </li>
        <?php endforeach; ?>
    </ol>
</div>

<?php endif; ?>

<h1 class="page-heading"><?php echo $title; ?></h1>

<form action="" method="post">
    <ul>
        <li>
            <label for="nickname">Nickname:</label> <input id="nickname" name="nickname" type="text">
            <p class="input-description">Your nickname will be as an identity on the site; it will be displayed wherever you will post, etc.</p>
        </li>
        <li>
            <label for="email">Email:</label> <input id="email" name="email" type="text" placeholder="your@email.com">
            <p class="input-description">Enter a valid email to receive the confirmation link to validate your account.</p>
        </li>
        <li>
            <label for="password">Password:</label> <input id="password" name="password" type="password">
            <p class="input-description">Enter a password to sign in to your account. Try to put a difficult password to make it more complicated to find.</p>
        </li>
        <li>
            <label for="password-confirmation">Password Confirmation:</label> <input id="password-confirmation" name="password-confirmation" type="password">
            <p class="input-description">Confirm the password that you have put in the field above.</p>
        </li>
    </ul>
    <button type="submit" class="button primary">Sign Up</button>
</form>

当前结果：http://prntscr.com/86h5r2

PHP代码：

<?php

if(!empty($_POST))
{

    /* Nickname */

    if(empty($_POST["nickname"]))
    {
        $errors["nickname"] = "You have not completed the nickname field.";
    }

    elseif(!preg_match("/^[a-zA-Z0-9 _]+$/", $_POST["nickname"]))
    {
        $errors["nickname"] = "Your nickname is not valid.";
    }

    /* E-mail */

    if(empty($_POST["email"]))
    {
        $errors["email"] = "You have not completed the email field.";
    }

    elseif(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL))
    {
        $errors["email"] = "Your email is not valid.";
    }

    /* Password */

    if(empty($_POST["password"]))
    {
        $errors["password"] = "You have not completed the two password fields.";
    }

    elseif($_POST["password"] != $_POST["password-confirmation"])
    {
        $errors["password"] = "The passwords did not match. Please enter the same password in both fields.";
    }
}

?>

Answer 1

要将边框添加到带有错误的输入中，您需要在类属性中嵌入一个php语句。只需在css中定义类名即可。

<input type="text" class="<?=  isset($error['name']) ? 'has-error'  : ''   ?>" value="" >

Answer 2

向<li>添加样式是一种方法

<ol>
    <?php foreach($errors as $error): ?>
    <li style="border:red solid 1px">
        <p><?= $error; ?></p>
    </li>
    <?php endforeach; ?>
</ol>

更好的方法是创建一些css，然后向<li>中添加一个类。

<style>
  .an-error-msg {
     border:red solid 1px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px; /* future proofing */
     -khtml-border-radius: 10px; /* for old Konqueror browsers */
   }
</style>

<ol>
    <?php foreach($errors as $error): ?>
    <li class="an-error-msg">
        <p><?= $error; ?></p>
    </li>
    <?php endforeach; ?>
</ol>

Answer 3

为什么不把required属性设为客户端，如：https://jsfiddle.net/kn7qjg6c/

 <form method="post">
<input type="text" placeholder="name" required/>
<input type="submit" />
</form>

CSS

input:required:focus {
  border: 1px solid red;
  outline: none;
}