innerHTML работает только над некоторыми функциями

0

В следующем сценарии я успешно получаю сообщения об ошибках для поля имени и массива переключателей, но не для флажка или поля номера. Поле номера не требуется, но когда я ставлю число, большее 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;
}

Благодарю.

  • 0
    document.getElementById("disclaimer").check должен быть document.getElementById("disclaimer").checked document.getElementById("disclaimer").check
Теги:
validation

2 ответа

1
Лучший ответ

Попробуйте сделать:

var y = parseInt(num.value, 10); в функции validateNumber. Вы передаете строку и проверяете, является ли она NaN

также, если вы хотите, чтобы число от 1 до 50, ваш чек должен быть

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

также в validateDisclaimer строка должна читать:

if (document.getElementById("disclaimer").checked === false) { вместо .check

  • 0
    Да, это было сделано. Две небольшие ошибки я не видел. Спасибо, Шон.
2

Эта строка неверна:

 if (y < 0 && y > 50)

y не может быть ниже 0 и выше 50, поэтому вы никогда не будете инициировать изменение стиля

EDIT: я разветкил вашу скрипку с этим изменением, и это работает для меня: http://jsfiddle.net/Lgr3D/

  • 0
    Спасибо! Это дало мне половину пути, я новичок в Javascript и не понял, что использую AND вместо OR. Я выбрал другой ответ, потому что он затрагивал обе проблемы, и я очень ценю, что вы нашли время.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню