Question

当用户单击“提交”并且必填字段为空时，我无法更改输入样式。

我尝试为每个输入创建一个div并在CSS中对其进行更改，尝试在CSS中使用if，在php中尝试if和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中使用所需的选择器，而不是.erro类

     A    B    C    D  E    F  common
0  1.0  3.0  5.0  NaN  7  NaN    75.0
1  NaN  2.0  4.0  NaN  3  2.0    75.0
2  7.0  6.0  NaN  5.0  2  NaN    50.0
3  2.0  NaN  5.0  NaN  7  3.0   100.0

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>';

    // (...)
}

单击提交并且输入为空时，如何更改输入样式？

2 个答案: