innerHTML 仅适用于某些功能

Question

在以下脚本中，我成功获得了名称字段和单选按钮数组的错误消息，但没有收到复选框或数字字段的错误消息。数字字段不是必需的，但是当我输入大于 50 的数字时，它什么也不做。快把我逼疯了！

JSfiddle

HTML：

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post">
    <div>
        <label>First Name</label>
        <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
        <div id="name-error" class="error"></div>
    </div>
    <div>
        <label>I prefer</label>
        <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs
        <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats
        <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither
        <div id="pet-error" class="error"></div>
    </div>
    <div>
        <label>My favorite number between 1 and 50</label>
        <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus />
        <div id="number-error" class="error"></div>
    </div>
    <div>
        <label>Disclaimer</label>
        <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true.
        <div id="disclaimer-error" class="error"></div>
    </div>
    <div>
        <button type="submit" name="submit" id="submit" tabindex="10">Send</button>
    </div>
</form>

JS：

    function validateFormOnSubmit(contact) {
    reason = "";
    reason += validateName(contact.name);
    reason += validatePet(contact.pet);
    reason += validateNumber(contact.number);
    reason += validateDisclaimer(contact.disclaimer);
    console.log(reason);
    if (reason.length > 0) {
        return false;
    }
    else {
        return false;
    }
}
// validate required fields
function validateName(name) {
    var error = "";
    if (name.value.length == 0) {
        name.style.background = 'Red';
        document.getElementById('name-error').innerHTML = "The required field has not been filled in";
        var error = "1";
    }
    else {
        name.style.background = 'White';
        document.getElementById('name-error').innerHTML = '';
    }
    return error;
}

function validatePet(pet) {
    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
        document.getElementById('pet-error').innerHTML = "Pet required";
        var error = "2";
    }
    else {
        document.getElementById('pet-error').innerHTML = '';
    }
    return error;
}

function validateNumber(number) {
    var num = document.forms["contact"]["number"];
    var y = num.value;
    if (!isNaN(y)) {
        if (y < 0 && y > 50) {
            //Wrong
            number.style.background = 'Red';
            document.getElementById("number-error").innerHTML = "Must be between 0 and 50.";
            var error = "10";
        }
        else {
            //Correct
            document.getElementById("number-error").innerHTML = "";
        }
        return error;
    }
    else {
        document.getElementById("number-error").innerHTML = "Must be a number.";
        var error = "3";
    }
    return error;
}

function validateDisclaimer(disclaimer) {
    var error = "";
    if (document.getElementById("disclaimer").check === false) {
        document.getElementById('disclaimer-error').innerHTML = "Required";
        var error = "4";
    }
    else {
        document.getElementById('disclaimer-error').innerHTML = '';
    }
    return error;
}

谢谢。

Answer 1

这一行是错误的：

 if (y < 0 && y > 50)

y 不能同时低于 0 和高于 50，因此您永远不会触发样式更改

编辑：我用这个改变分叉了你的小提琴，它对我有用： http://jsfiddle.net/Lgr3D/

Answer 2

尝试做：

var y = parseInt(num.value, 10); 在validateNumber 函数中。您正在传递一个字符串并检查它是否为 NaN

如果你想要一个从 1 到 50 的数字，你的支票应该是

if (y < 1 || y > 50) { //wrong

同样在validateDisclaimer 中，该行应为：

if (document.getElementById("disclaimer").checked === false) { 而不是.check