javascript - 如何使用 JavaScript 验证 HTML 中的 "Select"标签

Question

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
    <legend><span class="number">1</span>Departing & Arriving</legend>
    <fielset class="col-sm-6">
        <label for="FDestination">From</label>
        <select name="Location" id="Location">
            <option value="Please Select">Please Select</option>
            <option value="Newport">Newport</option>
            <option value="Mahdi">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>
    </fieldset>
</form>

<script>
    function checkforblank(){
        if (document.getElementsByID('Location').value== "Please Select") {
            alert('Please enter first name');
            document.getElementById('Location').style.borderColor = "red"; 
            return false; 
        }
    }
</script>

当用户从字段集中选择“请选择”选项时，如何显示错误？

Answer 1

How can I display error when user chooses "Please Select" option from fieldset?

您已经在验证表单提交，现在您只需要为 select onchange 添加相同的验证函数:

function checkforblank() {
    
    var location = document.getElementById('Location');
    var invalid = location.value == "Please Select";
 
    if (invalid) {
        alert('Please enter first name');
        location.className = 'error';
    }
    else {
        location.className = '';
    }
    
    return !invalid;
}

.error {border: 1px red solid;}

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
    <legend><span class="number">1</span>Departing & Arriving</legend>
    <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">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>
    </fieldset>
    <button>Save</button>
</form>

_{您不会在演示中看到警报，因为在片段沙盒 iframe 中不允许这样做 :(}