Question

这是我的HTML表单：

<form action="process.php" id="login" method="POST">
<p>Username: <?php echo $form->error("user"); ?></p>
<div>
<input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18" value="<?php echo $form->value("user"); ?>">
</div>
<p>Password: <?php echo $form->error("pass"); ?></p>
<input type="password" name="pass" id="pass" value="<?php echo $form->value("pass"); ?>">
<p>Email:</p>
<?php echo $form->error("email"); ?>
<input type="text" name="email" value="<?php echo $form->value("email"); ?>">
<input type="hidden" name="fav_continent" value="Default">
<input type="hidden" name="fav_colour" value="Default">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Register">
</form>

这是我的文本输入字段的自定义样式：

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}

在JSFIDDLE中看起来像这样：http://jsfiddle.net/qzrtccLx/

如果用户提交表单并且其中一个文字输入字段为空，如何将 EMPTY 文字输入字段从border-bottom: 1px solid #9e9e9e;更改为border-bottom: 1px solid red;？

Answer 1

使用required属性，我们可以使用:invalid伪类。 Snippet没有用PHP证明这种行为，所以我已经发布了所有这些。

＆＃13;

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}
input[type=text]:invalid {
  border-color:red;
}

＆＃13;

<form action="process.php" id="login" method="POST">
<p>Username: </p>
<div>
<input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18" value="" required>
</div>
<p>Password: </p>
<input type="password" name="pass" id="pass" value="">
<p>Email:</p>
<input type="text" name="email" value="">
<input type="hidden" name="fav_continent" value="Default">
<input type="hidden" name="fav_colour" value="Default">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Register">
</form>

＆＃13;

Answer 2

如果你打开使用jQuery，你应该使用jQuery的submit()函数来处理表单提交。此函数还处理实际的表单提交。 return true;提交并return false;停止提交。

$("#login").submit(function() {
    $(this).find("input[type='text']").each(function() {
        if (!$(this).val()) {
             $(this).css("border-bottom", "1px solid red");
        }
    }
}

Answer 3

这是纯JavaScript中的答案。在提交表单时，我已经编写了一个事件来检查所有输入。如果有任何值为空，则我更新输入上的类并阻止表单提交。

＆＃13;

var form = document.getElementById("login");
login.addEventListener("submit", function(e) {
  var valid = true;
  var inputs = login.querySelectorAll("input");
  [].forEach.call(inputs, function(input) {
    if (input.value === "") {
      valid = false;
      input.classList.add("error");
    }  
  });
  
  if (!valid)
    e.preventDefault();
});

＆＃13;

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}

input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]) {
 border-bottom: 1px solid #26a69a;
 box-shadow: 0 1px 0 0 #26a69a; 
}

input[type=text].error {
  border-bottom: 1px solid red;
}

＆＃13;

<form action="process.php" id="login" method="POST">
  <p>Username: </p>
  <div>
    <input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18">
  </div>
  <p>Password:</p>
  <input type="password" name="pass" id="pass">
  <p>Email:</p>
  <input type="text" name="email">
  <input type="hidden" name="fav_continent" value="Default">
  <input type="hidden" name="fav_colour" value="Default">
  <input type="hidden" name="subjoin" value="1">
  <input type="submit" value="Register">
</form>

＆＃13;

Answer 4

使用jquery .val()和submit事件处理程序

例如

$( "form" ).submit(function( event ) {
   if($('input').val() == ''){
        $('input').css('border-bottom:', '1px solid red');
   }
})

如果在提交时文本输入为空，则编辑CSS

4 个答案: