我怎样才能改变输入风格，当我点击提交和输入是空的？

Question

当用户点击提交和所需的字段是空的，我不能改变输入风格。

我尝试创建为每个输入一个div和CSS改变它，如果使用CSS中试过，在PHP尝试，如果和elseif的，但似乎没有任何工作。我真的很需要这份工作，因为这是一个非常重要的学校项目。我希望你能帮助我。

PHP：

  function ApresentarFormulario() {
      echo '
      <div id="body">        
      <div class="signup-box">
      <br><br><br>
      <h1>SIGNUP</h1>
      <br><br>
      <form class="form_signup" method="post" action="register.php?a=register" enctype="multipart/form-data">
      <table>
        <tr>
        <td>
          <label>Primeiro nome: *</label>
          <input type="text" name="primeironome" value="" required>
        </td>
        <td>
           <label>Último nome:</label>
           <input type="text" name="ultimonome" value="">
        </td>
        </tr>
        <tr>
        <td>
          <label>Username: *</label>
          <input type="text" name="username" value="" required>
        </td>
        <td>
          <label>Email: *</label>
          <input type="email" name="email" value="" required>
        </td>
        </tr>
        <tr>
        <td>
          <label>Password: *</label>
          <input type="password" name="password1" value="" required>
        </td>
        <td>
          <label>Confirme a password: *</label>
          <input type="password" name="password2" value="" required>
        </td>
        </tr>
                             (...)
      </table>
<br><br>

<input type="submit" name="register" value="SIGN UP">
</form>
</div>
<br>
</div>
';
}

if($primeironome=="") {
  echo 'Primeiro nome';
  $erro = true;
}

if ($ultimonome=="") {
  echo 'Último nome';
  $erro = true;
}

if ($username=="") {
  echo 'Username';
  $erro = true;
}

if ($email=="") {
  echo 'Email';
  $erro = true;
}

if ($password1=="") {
  echo 'Password 1';
  $erro = true;
}

if ($password2=="") {
  echo 'Password 2';
  $erro = true;
}
                              (...)


if($erro)
{
  ApresentarFormulario();
  exit;
}

CSS：

div#body input[type=text], input[type=email], input[type=password], input[type=tel] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
}

.erro {
    border: none;
    border-bottom: 1px solid red;
    color: red;
    background: transparent;
    outline: none;
}

我想所需投入的边框颜色当问题被证实变为红色。

Answer 1

在你的CSS使用需要选择，而不是.error类

:required{
    border: none;
    border-bottom: 1px solid red;
    color: red;
    background: transparent;
    outline: none;
}

Answer 2

这不是做了正确的方式，但你可以试试。

创建一个数组来存储所有错误。

$erros = array();

if($primeironome=="")
  array_push( $erros, 'primeiro_nome');

if($ultimonome=="")
  array_push( $erros, 'ultimo_nome');

之后，通过对参数的方法传递数组。

if( count( $erros ) > 0 ) {
  ApresentarFormulario( $erros );
  exit;
}

检查是否有与输入域的按键。

function ApresentarFormulario( $erros ) {
    // (...)

    $class = ( in_array( 'primeironome', $erros ) ? 'erro' : '';
    echo '<input type="text" name="primeironome" value="" class="' . $class . '" required>';

    $class = ( in_array( 'ultimonome', $erros ) ? 'erro' : '';
    echo '<input type="text" name="ultimonome" value="" class="' . $class . '" required>';

    // (...)
}