如何在显示错误时为边框上色

How to color border when error is displayed?

本文关键字：边框 错误 显示      更新时间：2023-09-26

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
}

当用户在任一框中选择错误的选项（"请选择"）时，我希望所选选项的边框为彩色。现在发生的情况是，当我点击提交时，它会显示警报，然后在几秒钟内，一个框中出现颜色，另一个框为空，然后它就消失了。

当用户在任一框中选择"请选择"选项时，我希望错误显示在该框中，例如，如果两个框都有"请选择"，则两个框均高亮显示，或者如果一个框有"请选项"，而另一个框有效，则只有一个选项错误的框高亮显示。此外，当在警报框中单击"确定"时，框将保持高亮显示，直到更改为有效选项。

我要做的第一件事是将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。

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

Fiddle示例：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>
相关文章：