編輯CSS如果文本輸入空上提交

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/

如果用戶提交表單並且其中一個文本輸入字段爲空，那麼如何使文本輸入字段從01更改爲EMPTY 至border-bottom: 1px solid red;？

Answer 1

下面是純JavaScript一個答案。我已經寫了一個事件來檢查表單提交時的所有輸入。如果有任何值爲空，則我更新輸入的類並阻止提交表單。

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(); 
 
});

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

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

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

使用required屬性我們可以使用:invalid僞類。代碼片段不會用PHP演示這種行爲，所以我已經發布了它。

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

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

Answer 4

使用jQuery .val()和submit事件處理

例如

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

Answer 5

您需要使用JS通過將事件偵聽器攔截表單的提交。

var form = document.getElementById('login'); 
form.addEventListener('submit', function(e){ 
    //Code here 
}, false); 

然後在函數裏面找到所有的輸入字段並循環遍歷每一個字段。

var inputs = form.getElementsByTagName('input'); 
for(var i=0;i<inputs.length;i++){ 
    //Check each input value individually 
} 

然後在循環中檢查輸入值是否爲空。如果是這樣，請給它一個紅色邊框並取消表單提交。

if(inputs[i].value=='') { 
    inputs[i].style.borderBottom = '1px solid red'; 
    e.preventDefault(); 
} 

看看這個更新fiddle