当错误显示时如何给边框涂色？

Question

1. 出发和到达

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

当用户选择错误选项 ("Please Choose") 时，我希望所选选项的边框被着色。现在的情况是，当我点击提交后，它会显示警报，然后在一个框中出现颜色，而另一个框则为空，然后它就消失了。

当用户在任一框中选择 "Please Choose" 选项时，我希望在该框中显示错误信息。例如，如果两个框都有 "Please Choose"，则两个框都突出显示，或者如果一个框有 "Please Choose" 而另一个框是有效的，则只突出显示一个有错误选项的框。另外，当在警报框中单击“确定”后，这些框将保持突出显示，直到更改为有效选项。

- el mashrafi

---

创建一个变更事件，检查两个ID输入框是否都有“请选择”这个值，如果是，则使用jQuery CSS函数进行着色。 - EugenSunic

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

链接到 fiddle

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

如果可以使用jQuery，请像这样包含它。

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

编辑 :: 修正标签to属性指向相应的id。

- MrMarlow

---

谢谢您的回答。如果我想将代码改为JQuery，我该如何在HTML中运行它，即如何在提交时调用函数以便它可以运行？ - el mashrafi

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/

如果您想处理未赋值的输入，可以添加以下两个额外的if语句。

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

你可以使用.val()函数代替.text()函数，这在这种情况下更为合适。

要调用上述代码，请将其放置在标签之间。

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

- EugenSunic

---

谢谢，我该如何将它实现到我的JS中以使其运行？我需要任何插件吗？ - el mashrafi