Question

我正在使用javascript验证处理HTML5表单。我想禁用一个select元素，直到几个输入框包含有效数据。这是我简化的HTML：

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="valid(this)" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="valid(this)" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="valid(this)" />
<br />
<select id="drop" disabled>
    <option>disabled until input boxes are valid</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

这是简化的javascript：

function valid(obj) {
    if ((obj.validity) && (!obj.validity.valid)) {
        return false;
    } else {
        return true;
    }
}

var numA = document.getElementById("num1"),
    numB = document.getElementById("num2"),
    numC = document.getElementById("num3");

if (valid(numA) && valid(numB) && valid(numC)) {
    document.getElementById("drop").disabled = false;
}

这是我的jsfiddle

这可以用简单的'ol javascript完成吗？由于我还在尝试学习Javascript，我还不熟悉JQuery。

每当输入字段内容发生变化时，我想验证输入。然后，它需要检查所有其他输入字段（num1，num2，num3）是否有效。如果且仅当所有都有效时，它在select元素上设置disabled = false。

有更好的方法吗？

Answer 1

尝试

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="check()" />

然后

function valid(obj) {
    //simplified version
    return !obj.validity || obj.validity.valid;
}


var numA = document.getElementById("num1"),
    numB = document.getElementById("num2"),
    numC = document.getElementById("num3");

function check() {
    document.getElementById("drop").disabled = !valid(numA) || !valid(numB) || !valid(numC);
}
check();

演示：Fiddle

将脚本保留在页面底部，以确保在执行document.getElementById时元素将存在于dom中。在jQuery中，您需要将脚本放在No Wrap - Body（左侧面板的第二个下拉列表）

中

Answer 2

这是给你的答案。每次更改输入值时，如果所有输入都有效，则需要检查条件。

这是编辑版

HTML

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="check()" />
<br />
<br />
<select id="drop" disabled>
    <option>disabled until input boxes are valid</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

这是JS

function valid(obj) {
    if (obj.validity && !obj.validity.valid) {
        return false;
    } else {
        return true;
    }
}

    var numA = document.getElementById("num1"),
        numB = document.getElementById("num2"),
        numC = document.getElementById("num3");
function check(){

    if (valid(numA) && valid(numB) && valid(numC)) {
        document.getElementById("drop").disabled = false;
    }
}

不要忘记检查Nowrap - 在JSfiddle

上

Answer 3

以下是 jsFiddle

简化的代码

如果所有内容都有效，此代码会将dropdown list的状态切换为enabled，如果用户将输入设置为无效，则返回disabled。

<强> JS：

function valid(obj) {
    return !( obj.validity && !obj.validity.valid )
}

function testValidity() {
    document.getElementById("drop").disabled = !(
        valid( document.getElementById("num1") ) && 
        valid( document.getElementById("num2") ) && 
        valid( document.getElementById("num3") )
    );
}

<强> HTML：

<input ... onchange="testValidity()" ... />

Answer 4

到目前为止，所有答案都是正确的，但如果你不想在每个输入中添加onchange属性，可以选择：

function valid(obj) {
    return !(obj.validity && !obj.validity.valid);
}

var inputs      = document.querySelectorAll('input'),
    inputLength = inputs.length,
    i;

var checkValidity = function() {
    var totalValid = 0;
    for (i = 0; i < inputLength; i++) {
        input = inputs[i];
        if (valid(input)) {
            totalValid += 1;
        }
    }

    document.getElementById('drop').disabled = (totalValid !== inputLength);
}

for (i = 0; i < inputLength; i++) {
    input = inputs[i];
    input.addEventListener('blur', checkValidity, false);
}

这只是为每个输入添加了一个模糊事件监听器，它会根据所有输入的有效性动态更改下拉列表中的禁用状态。如果你最终有一个带有必需属性的下拉列表，你会遇到一些问题，所以你可能想要从inputs数组中删除那个输入。

以下是jsfiddle： http://jsfiddle.net/EV88V/10/

禁用元素，直到其他输入字段有效

4 个答案: