如何在顯示錯誤時對邊框進行着色？

Question

1Departing &到達

  <fielset class="col-sm-6"> 
       <label for="FDestination" >From</label> 
       <select name="Location" id = "Location" onchange="checkforblank()" > 
        <option value = "Please Select" >Please Select </option> 
        <option value="Newport">Newport</option> 
        <option value="Mahdi">London</option> 
        <option value="Cardiff">Cardiff</option> 
        <option value="Cilo">Brazil </option> 
       </select> 



      <fielset class="col-sm-6"> 
       <label for="FDestination">To</label> 
       <select name="LocationTo" id = "LocationTo" onchange="checkforblank()"> 
        <option value = "Please Select">Please Select </option> 
        <option value="Cardiff">Cardiff</option> 
        <option value="Mahdi">London</option> 
        <option value="Newport">Newport</option> 
        <option value="Cilo">Brazil</option> 
       </select> 

<script> 

    function checkforblank() { 

    var location = document.getElementById('Location'); 
    var invalidFrom = location.value == "Please Select"; 
    var locationTo = document.getElementById('LocationTo'); 
    var InvalidTo = locationTo.value == "Please Select"; 

    if (invalidFrom || InvalidTo) { 
     alert('Please enter first name'); 
     location.className = 'error'; 
     InvalidTo.className = 'error'; 
    } 
    else { 
     location.className = ''; 
    } 

    return !invalid; 
} 


</script> 


.error { 
    border: solid 5px #FF0 
} 

我想，當用戶選擇了錯誤的選項（ 「請選擇」）在任一箱所選項的邊界着色。現在發生的事情是，當我點擊提交時，它顯示警報，然後幾秒鐘，顏色出現在一個框中，另一個框是空白的，然後它就消失了。

當用戶選擇任一個框中的「請選擇」選項時，我希望在該框中顯示錯誤，例如如果兩個盒子都有「請選擇」，那麼兩者都會突出顯示，或者如果一個盒子有「請選擇」，另一個盒子有效，那麼只會突出顯示具有錯誤選項的一個盒子。此外，如果在警告框中單擊確定，則框將保持突出顯示狀態，直到更改爲有效選項。

Answer 1

我會做的第一件事就是修復fielset爲fieldset，因爲它應該是。

其次，我會爲他們添加結束標籤，就像這樣;

<fieldset class="col-sm-6"> 
    <label for="Location">From</label> 
    <select name="Location" id="Location" onchange="checkforblank()"> 
     <option value="Please Select">Please Select</option> 
     <option value="Newport">Newport</option> 
     <option value="Mahdi">London</option> 
     <option value="Cardiff">Cardiff</option> 
     <option value="Cilo">Brazil</option> 
    </select> 
</fieldset> 
<fieldset class="col-sm-6"> 
    <label for="LocationTo">To</label> 
    <select name="LocationTo" id="LocationTo" onchange="checkforblank()"> 
     <option value="Please Select">Please Select</option> 
     <option value="Cardiff">Cardiff</option> 
     <option value="Mahdi">London</option> 
     <option value="Newport">Newport</option> 
     <option value="Cilo">Brazil</option> 
    </select> 
</fieldset> 

之後，您沒有指定使用jQuery是否是一種選擇，所以這個答案取決於這個問題的答案，因爲它使用jQuery的。

$('#Location, #LocationTo').change(function(e) { 
    var fromVal = $('#Location').val(), 
     toVal  = $('#LocationTo').val(), 
     borderCol = ''; 

    if (fromVal == "Please Select" || toVal == "Please Select") { 
     borderCol = 'red'; 
    } else { 
     borderCol = 'black'; 
    } 

    $('select[id="Location"],select[id="LocationTo"]').parent().css({ 
     'border-color' : borderCol 
    }); 
}); 

鏈接到小提琴

http://jsfiddle.net/MrMarlow/eg8k4vL7/ 

如果使用jQuery是一個選項，包括它像這樣

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

編輯 ::固定標籤to屬性指向相應的ID。

Answer 2

下面是解決您的問題的JavaScript/JQuery代碼（無論何時兩個目標相匹配，由於您無法從A點移動到A點，邊界變爲紅色，因此沒有任何意義）。

代碼：

var index_one; 
var index_two; 

    $('#Location, #LocationTo').change(function (e) { 

     index_one = $("#Location")[0].selectedIndex; 
     index_two = $("#LocationTo")[0].selectedIndex; 
    }); 
    $("#submit").click(function() { 
     if ($("#Location>option").eq(index_one).text() == $("#LocationTo>option").eq(index_two).text()) { 
      $('#Location, #LocationTo').css("border-color", "red"); 
     } else { 
      $('#Location, #LocationTo').css("border-color", "black"); 
     } 
    }); 

小提琴例如：http://jsfiddle.net/eugensunic/eg8k4vL7/1/

此外，如果你想處理尚未給出一個值輸入，你可以添加這兩個額外的，如果的可能性

else if($("#Location>option").eq(index_one).text() =="Please Select") 
    { 
     alert ("Select an option"); 
    } 
     else if($("#LocationTo>option").eq(index_one).text() =="Please Select") 
    { 
     alert ("Select an option"); 
    } 

而不是.text（）你可以使用.val（） ）在這種情況下更合適。

要調用上面的代碼把它的標籤

<head> 
<script src="jquery-1.11.3.min.js"></script> //jquery lib, must include 
<script> 
//the above code 
<script> 
</head>