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

Question

I am working on an HTML5 form with javascript validation. I would like to disable a select element until several input boxes contain valid data. Here's my simplified 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>

Here's the simplified 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;
}

and here's my jsfiddle

Can this be accomplished with plain 'ol javascript? As I am still trying to learn Javascript, I am not yet familiar with JQuery.

Any time the input field content changes I would like to validate the input. Then it would need to check if all other input fields (num1, num2, num3) are valid. If, and only if, all are valid it sets disabled = false on the select element.

Is there a better way to do this?

Answer 1

Try

<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()" />

then

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

Demo: Fiddle

Keep the script at the bottom of the page to make sure that when document.getElementById is executed the element will be already present in the dom. In jQuery you need to place the script in No Wrap - Body (Second dropdown in left panel)

Answer 2

Here is answer for you. You need to check condition if all inputs are valid every time when you change input value.

Here is edited version

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>

And here is 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;
    }
}

Don't forget to check Nowrap - in head on JSfiddle

Answer 3

Here is your code simplified at jsFiddle

This code is going to switch the state of your dropdown list to enabled if everything is valid, and back to disabled if the user turn the inputs to invalid.

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

All the answers so far are right on, but in case you don't want to add the onchange attribute to each input here's an alternative:

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

This just adds an blur event listener to each input and it dynamically changes the disabled on the dropdown depending on all the inputs validity. If you eventually have the dropdown with a required attribute, you'll run into a bit of issues, so you'd probably want to remove that input from the inputs array.

Here's the jsfiddle: http://jsfiddle.net/EV88V/10/