Javascript - 满足正确条件时验证返回 false

Question

我正在学习 Javascript，并尝试设置一个基本的表单验证，它应该具有以下功能:

1. 如果发现错误，请将文本字段背景颜色更改为红色，将字段值更改为错误消息
2. 如果没有发现错误，则继续

我的问题

验证正在工作，但即使没有发现错误，它仍然显示错误消息...我做错了什么？

代码如下:

function validate(){
    //form validation

    var name=document.getElementById("name");
    var surname=document.getElementById('surname');

    //name
    if (name.value=='') {
        name.style.backgroundColor="red";
        name.style.color="white";
        name.value="Name is required"
        return false;
    } 

    else if(isNaN(name)==true){
        name.style.backgroundColor="red";
        name.style.color="white";
        name.value="Name: Only enter letters A-Z"
        return false;
    } 

    //surname
    if (surname.value == ""){
        surname.style.backgroundColor="red";
        surname.style.color="white";
        surname.value="Surname is required"
        return false;
    }

    else if(isNaN(name)==true){
        surname.style.backgroundColor="red";
        surname.style.color="white";
        surname.value="Surname: Only enter letters A-Z"
        return false;
    } 
    return true;
 }

HTML

 <form id="enquire" method="post">
    <h2>Test Drive an Audi Today</h2>
    <input type="text" id="name" value="Name" class="textbox"  name="name" onfocus="if(this.value=='Name' || this.value=='Name is required' || this.value=='Name: Only enter letters A-Z' ) this.value='';" /><br />
    <br />
    <input type="text" id="surname" value="Surname" class="textbox"  name="surname"  onfocus="if(this.value=='Surname') this.value='';"  /><br />

    <input type="submit" name="submit" class="butt" value="Send" onclick="return validate()"  />

Answer 1

您需要将输入字段的值传递给 isNaN() ，现在您正在传递 dom 元素，该元素将始终返回 true，因为它不是数字

isNaN(name.value)

演示:Fiddle