如果字段有效，则显示不同的边框颜色答案

【问题标题】：Displaying differnt border color if field is valid如果字段有效，则显示不同的边框颜色
【发布时间】：2014-06-12 07:46:28
【问题描述】：

所以我有我的表格，我在下面提供了图片。左边的图片是正常的边框颜色，但是右边的红色轮廓是表单输入无效的时候。

我将如何通过 PHP 做到这一点？这是对应的代码

<?php
try {
    $handler = new PDO('mysql:host=localhost;dbname=s','root', '*');
    $handler->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (PDOException $e){
    exit($e->getMessage());
}

// Post
$name = $_POST['name']; 
$username = $_POST['username']; 
$email = $_POST['email'];   
$password = $_POST['password']; 
$password1 = $_POST['passwordconf'];
$ip = $_SERVER['REMOTE_ADDR'];

// Verifcation 
if (empty($name) || empty($username) || empty($email) || empty($password) || empty($password1)) {
    echo "Complete all fields";
}

// Password match
if ($password != $password1) {
    echo $passmatch = "Passwords don't match";
}

// Email validation
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo $emailvalid = "Enter a  valid email";
}

// Password length
if (strlen($password) <= 6){
    echo $passlength = "Choose a password longer then 6 character";
}

if(empty($passmatch) && empty($emailvalid) && empty($passlength)) { 
//Securly insert into database
$sql = 'INSERT INTO userinfo (name ,username, email, password, ip) VALUES (:name,:username,:email,:password,:ip)';

$query = $handler->prepare($sql);
$query->execute(array(
    ':name' => $name,
    ':username' => $username,
    ':email' => $email,
    ':password' => $password,
    ':ip' => $ip

 ));
}
?>

还有我的 HTML 表单

<!DOCTYPE html>
<html lang="en">        
<body>
<div class="container">
    <form class="form-signin" role="form" action="register.php" method="post">
        <h2 class="form-signin-heading">Please sign up</h2>
        <input type="text" class="form-control" placeholder="Name"  name="name" autofocus style="border-color:#<?php   ?>;">
        <input type="text" class="form-control" placeholder="Username"  name="username" autofocus>
        <input type="text" class="form-control" placeholder="Email"  name="email" autofocus>
        <input type="password" class="form-control" placeholder="Password" name="password">
        <input type="password" class="form-control" placeholder="Password, Again" name="passwordconf" >
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
    </form> 
</div>
</body>
</html>

如果输入满足 if 语句，我将如何显示颜色？

【问题讨论】：

你在使用 Bootstrap 吗？对于您正在使用的类，似乎是这样：getbootstrap.com/css/#forms-control-validation您必须将相应的类添加到输入中。
是的，我正在使用引导程序 @azeós
您可以使用 Flash 会话并指定一个错误类，然后如果设置了该 Flash 会话错误，则在特定字段上回显它。
Making textbox color red when error occurs in a form的可能重复
我不会说它是重复的，因为每个人的代码都不同@DanMan

标签： php html css forms

【解决方案1】：

当您的表单出现错误时，您需要重新显示它。在不了解您的代码结构的情况下很难给出建议，但我会假设您的 HTML 是通过调用 php.ini 来呈现的。一般来说，我做过类似的事情

$error = false
//this $_GET['submit'] variable could be part of the URL of your submitted form.
//alternately, you could check the HTTP method of the page request
if ($_GET['submit']) {
    //run your form logic
    //if you have success, run your php query and then redirect
    //to your "success" page using a 302 (using a header("Location:... sort of call)
    //you would also want to call die() or something right here
}
//if you make it this far, display your page including the bits about errors
//your form's action goes right back to the same page that rendered it, but with
//some change to the url to let the script know that you want to process the form

使用 PHP5 并打开有关未定义变量的警告，您需要在检查表单是否正在提交之前定义所有错误消息变量。

假设您正在使用 twitter bootstrap，因为您到处都有form-control（假设 >= 3.0.0），您可以使用（用于图形方面）has-suceess、has-error 等此处显示：http://getbootstrap.com/css/#forms-control-validation。

当您因数据错误而重新显示表单时，请将您的错误消息传递给呈现您的 html 的任何内容。你的一个例子是（假设你的表单可以访问$passmatch，$emailvalid，$passlength）：

<!DOCTYPE html>
<html lang="en">        
  <body>

    <div class="container">

      <form class="form-signin" role="form" action="register.php" method="post">
        <h2 class="form-signin-heading">Please sign up</h2>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Name"  name="name" autofocus style="border-color:#<?php   ?>;">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username"  name="username" autofocus>
        </div>
        <div class="form-group <?php if (!empty($emailvalid)) { echo 'has-error'; } ?>">
          <input type="text" class="form-control" placeholder="Email"  name="email" autofocus>
        </div>
        <div class="form-group <?php if (!empty($passmatch) || !empty($passlength)) { echo 'has-error'; } ?>">
          <input type="password" class="form-control" placeholder="Password" name="password">
        </div>
        <div class="form-group <?php if (!empty($passmatch)) { echo 'has-error'; } ?>">
          <input type="password" class="form-control" placeholder="Password, Again" name="passwordconf" >
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
      </form>
    </div> 
  </body>
</html>

我建议使用模板引擎或其他东西将视图与实际代码分开。

对于帮助文本，您可以在有错误的元素之后使用类似这样的内容：

<div class="form-group <?php if (!empty($yourVariable)) { echo 'has-error'; }?>">
    <input type="text" class="form-control" />
    <span class="help-block"><?php echo $yourVariable; ?></span>
</div>

有趣的是，如果您没有错误消息，甚至不会显示帮助块，因为该变量中没有任何内容。

编辑

示例页面：http://content.kevincuzner.com/register.php

示例来源：https://gist.github.com/kcuzner/11323907

【讨论】：

您的 HTML 是静态页面还是由 PHP 创建的？如果它不是由 PHP 创建的，我的 HTML 将无法工作，因为它与 HTML 混合了 PHP 内容。
它只是一个简单的注册表单，但它是一个 PHP 文件。
我在回答中试图传达的是，我会将您的注册表单和您的 register.php 合并到同一个 php 文件中。这样，在您提交表单之前，它会呈现 php.ini 文件。提交后，相同的脚本再次运行并尝试创建用户。如果成功，它会重定向到某个成功页面。如果失败，它会再次显示相同的表单。
我没有测试我的 HTML，所以当您尝试加载它时是否有任何错误？很可能是我犯了语法错误之类的。
好的，我的语法错误已修复（我有几个尾随 )）。它至少现在应该加载。

【解决方案2】：

我会在客户端使用 JavaScript 来处理这个问题。提交表单时，您可以检查输入是否有效，然后使用 JavaScript 更新边框颜色。

你可以在上面填写的<?php ?>（如果你想走这条路）可以只依赖于一些检查有效性的变量：

echo "Complete all fields";
$fieldsValid = false;

border-color: <?php $fieldsValid ? 'blue' : 'red' ?>

但您需要重新加载整个页面才能使其正常工作。 JavaScript 是更好的途径：

document.forms[0].addEventListener("submit", function () {
    var usernameInput = document.querySelector("[name=username]");
    if (!usernameInput.value) {
        usernameInput.style.borderColor = "red";
    }
});

【讨论】：

那么客户端和服务器端？以及在 my 代码中的外观如何？我是 JS 的新手，我需要我能得到的所有帮助！
将样式直接放入 HTML 是不好的做法。在无效字段上设置一个 CSS 类，如 error，然后将样式放入样式表中。