JavaScript 下拉表单验证 : Throwing Error when a value of "0" is passed

Question

我正在尝试创建一个表单，如果传递值“0”，则会抛出错误。我很难过，真的需要一些帮助。该脚本中有两个函数。第一个是工作，我可以根据选择更改 URL。我遇到问题的地方是我想要选择“--”和“选择状态”来触发第二个脚本，理论上它会突出显示该字段并且不允许用户单击。这是名为“validateEmpty”的函数

我完全接受不同的方法，这是我发现传递 value.length 为 0 的教程的破解版本。

示例页面在这里: http://www.brimbar.com/no_crawl/js-test-homepage.html

或

代码如下:

    <code>
    <div id="quoteDropdowns">
    <select id="stateType" name="stateType" onchange="dosomething()">
    <option value="select" selected="selected">Choose State</option>
    <option value="IL">Illinois</option>
    <option value="MD">Maryland</option>
    <option value="TX">Texas</option>
    <option value="VA">Virginia</option>
    <option value="--">--</option>
    <option value="other">Other</option>
    </select>
    </div>
    <div id="getAQuote"> <a id="mylink" class="myButton" href="#" onclick="validateEmpty">Get a Quote!</a> </div>
    <script type="text/javascript">
function dosomething() {
    var inputSelector = document.getElementById("stateType");
    var link = document.getElementById("mylink");


    if (inputSelector.value == "VA") {
        link.href = "http://www.test1.com";
    } 
    else if (inputSelector.value == "MD") {
        link.href = "http://www.test2.com";
    } 
    else if (inputSelector.value == "IL") {
        link.href = "http://www.test3.com";
    }
    else if (inputSelector.value == "TX") {
        link.href = "http://www.test4.com";
    }
    else if (inputSelector.value == "other") {
        link.href = "http://www.test5.com";
    }
            else if (inputSelector.value == "--") {
        stateType.value.length == 0;
        link.href = "#";  
    }


    } 

    console.log('First Function is Valid'); 

    function validateEmpty(stateType) {

    var error = value.length==0;

     if (stateType.value.length == 0) {
        stateType.style.border = 'red'; 
        error = "The required field has not been filled in.\n"
    } else {
        stateType.style.background = 'White';
    }
    return error; 

}
console.log('Second Function is Valid'); 

</script></code>

Answer 1

1) 好的，所以您已经决定使用内联 javascript 的旧的、黑暗的方式；) 而不是使用事件监听器，但是为什么每次选项更改时都设置链接元素的 href？这不是最佳的。我宁愿在单击链接时重定向(按需)。这让您只有一个功能。

2) 而不是使用 if..else 尝试使用 switch..case 构造它会在以后简化一些事情。此外，它似乎更具可读性，但也许更多的是偏好问题。

3) 你为什么要使用这种扭曲的逻辑来验证？您已经有一个 select 元素的值，它是“--”。使用它或者您也可以在 switch case 的默认部分处理它(参见 jsFiddle example )这也处理“选择状态”选项。当您单击链接并选择“错误”选项时，您会收到警告而不是重定向。

这是我的 jsFiddle 示例:example .