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

嘗試做：

在validateNumber功能var y = parseInt(num.value, 10);。你傳遞一個字符串，並檢查它是否NaN

此外，如果你想從1到50的數字，你的檢查應

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

也validateDisclaimer該行應爲：

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

Answer 2

此行是錯誤的：

if (y < 0 && y > 50) 

Y不能既低於0和超過50，所以你永遠不會觸發風格變化

編輯：我分叉這種變化你的小提琴，它爲我工作： http://jsfiddle.net/Lgr3D/