2017-03-20 64 views
0

一个人的第二个名字需要以大写字母开头。如果我首先键入大写字母,它会成功提交。JavaScript大写字母验证问题

问题是,当我输入一个小写字母时,将其提交,它会将错误消息抛出给它应该执行的用户。虽然当我用大写字母替换小写字母并尝试再次提交时,它仍然不会提交,但仍显示用户“必须从首都开始”。

HTML:

<form name="registrationForm" id="registrationForm" method="get"> 
    <table cellspacing="5" border="0"> 
     <tr> 
      <td align="right">First Name:</td> 
      <td> 
       <input type="text" name="firstName" id="firstName"> 
       <span id="firstNameError">*</span> 
      </td> 
     </tr> 
     <tr> 
      <td align="right">Second Name:</td> 
      <td> 
       <input type="text" name="secondName" id="secondName"> 
       <span id="secondNameError">*</span> 
      </td> 
     </tr> 

     <tr> 
      <td align="right">Town:</td> 
      <td> 
       <input type="text" name="town" id="town"> 
       <span id="townError">*</span> 
      </td> 
     </tr> 

     <tr> 
      <td align="right">Country:</td> 
      <td> 
       <input type="text" name="country" id="country"> 
       <span id="countryError">*</span> 
      </td> 
     </tr> 

     <tr> 
      <td align="right">E-Mail Address:</td> 
      <td> 
       <input type="text" name="emailAddress" id="emailAddress"> 
       <span id="emailAddressError">*</span> 
      </td> 
     </tr> 

     <tr> 
      <td align="right"></td> 
      <td><input type="button" id="submitRegistationForm" value="Submit"></td> 
     </tr> 
    </table> 
</form> 

的JavaScript:

var $ = function (id) { 
    return document.getElementById(id); 
} 

var validateRegistrationForm = function() { 
    var isValid = true; 

    //First Name Validation 
    if ($("firstName").value == "") { 
     $("firstNameError").firstChild.nodeValue = "This Field Is Required"; 
     isValid = false; 
    } else { 
     $("firstNameError").firstChild.nodeValue = ""; 
    } 

    //Second Name Validation 
    if ($("secondName").value == "") { 
     $("secondNameError").firstChild.nodeValue = "This Field Is Required"; 
     isValid = false; 
    } else if ($("firstName").value[0].toUpperCase() != $("firstName").value[0]) { 
     $("secondNameError").firstChild.nodeValue = "Must Start With A Capital"; 
     isValid = false; 
    } else { 
     $("secondNameError").firstChild.nodeValue = ""; 
    } 

    //Town Validation 
    if ($("town").value == "") { 
     $("townError").firstChild.nodeValue = "This Field Is Required"; 
     isValid = false; 
    } else { 
     $("townError").firstChild.nodeValue = ""; 
    } 

    //Country Validation 
    if ($("country").value == "") { 
     $("countryError").firstChild.nodeValue = "This Field Is Required"; 
     isValid = false; 
    } else { 
     $("countryError").firstChild.nodeValue = ""; 
    }  

    //E-Mail Validation 
    if ($("emailAddress").value == "") { 
     $("emailAddressError").firstChild.nodeValue = "This Field Is Required"; 
     isValid = false; 
    } else { 
     $("emailAddressError").firstChild.nodeValue = ""; 
    } 

    if (isValid) { 
     $("registrationForm").submit(); 
    } 
} 

window.onload = function() { 
    $("submitRegistationForm").onclick = validateRegistrationForm; 
} 
+0

注意,在'其他if'条件,你检查你的'的firstName的第一个字母'输入,而不是你的'secondName'。 –

回答

2

有一件事我注意到的是在你的第二个名称验证,你有一个else if引用您的firstName。试试这个:

if ($("secondName").value == "") { 
    $("secondNameError").firstChild.nodeValue = "This Field Is Required"; 
    isValid = false; 
} else if ($("secondName").value[0].toUpperCase() != $("#secondName").value[0]) { 
    $("secondNameError").firstChild.nodeValue = "Must Start With A Capital"; 
    isValid = false; 
} else { 
    $("secondNameError").firstChild.nodeValue = ""; 
} 
1

你在第20行遇到错误,它应该是:

} else if ($("secondName").value[0].toUpperCase() != $("secondName").value[0]) {