2013-03-28 54 views
2

我有以下代碼和驗證規則不起作用,請任何幫助! Web瀏覽器無法識別javascript代碼,因爲活動的x控件似乎沒有出現。javascript驗證規則不起作用

<HTML> 
<head> 
<title>Exam entry</title> 

<script lanuage="javascript" type="text/javascript"> 

var result = true; 

function validateForm() { 

    var msg=""; 

    if (document.ExamEntry.name.value=="") { 
     msg+="you must enter your name \n"; 
     document.ExamEntry.name.focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 
    if (document.ExamEntry.subject.value=="") { 
     msg+("You must enter the subject \n"); 
     document.ExamEntry.subject.focus(); 
     document.getElementById('subject').style.color="red"; 
     result false; 
    } 
    if (document.ExamEntry.ExaminationNumber.value=="") { 
     msg+("You must enter the Examination Number \n"); 
     document.ExamEntry.ExaminationNumber.focus(); 
     document.getElementById('ExaminationNumber').style.color="red"; 
     result false; 
    } 
    if(msg==""){ 
    return result; 
    } 

    { 
    alert(msg) 
    return result; 
    } 
} 
</script> 
<form> 
     <input type="radio" name="qualification" value="GCSE">GCSE<br> 
     <input type="radio" name="qualification" value="AS">AS<br> 
     <input type="radio" name="qualification" value="A2">A2<br> 
</form> 
</head> 

<body> 
<h1>Exam Entry Form</h1> 
<form name="ExamEntry" method="post" action="success.html"> 
<table width="50%" border="0"> 
    <tr> 
     <td id="name">Name</td> 
     <td><input type="text" name="name" /></td> 
    </tr> 
    <tr> 
     <td id="subject">Subject</td> 
     <td><input type="text" name="subject" /></td> 
    </tr> 
    <tr> 
     <td id="ExaminationNumber">ExaminationNumber</td> 
     <td><input type="text" name="ExaminationNumber" /></td> 
    </tr> 
<tr> 
    <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td> 
    <td><input type="reset" name="Reset" value="Reset" /></td> 
</tr> 

</table> 
</form> 
</body> 
</HTML> 

請有人幫忙,這讓我氣瘋了!

回答

0

你缺少上線23「=」號和29 result false;應該result = false;

提示:您可以查看您在瀏覽器的開發者控制檯的js錯誤。

更新:好吧,下面的工作正常,當我測試一下:

<html> 
<head> 
    <title>Exam entry</title> 

    <script lanuage="javascript" type="text/javascript"> 

     var result = true; 

     function validateForm() { 

      var msg = ""; 

      if (document.ExamEntry.name.value == "") { 
       msg += "you must enter your name \n"; 
       document.ExamEntry.name.focus(); 
       document.getElementById('name').style.color = "red"; 
       result = false; 
      } 
      if (document.ExamEntry.subject.value == "") { 
       msg + ("You must enter the subject \n"); 
       document.ExamEntry.subject.focus(); 
       document.getElementById('subject').style.color = "red"; 
       result = false; 
      } 
      if (document.ExamEntry.ExaminationNumber.value == "") { 
       msg + ("You must enter the Examination Number \n"); 
       document.ExamEntry.ExaminationNumber.focus(); 
       document.getElementById('ExaminationNumber').style.color = "red"; 
       result = false; 
      } 
      if (msg == "") { 
       return result; 
      } 

      { 
       alert(msg) 
       return result; 
      } 
     } 
    </script> 
</head> 

<body> 
    <h1>Exam Entry Form</h1> 
    <form name="ExamEntry" method="post" action="success.html"> 
     <table style="width: 50%;" border="0"> 
      <tr> 
       <td id="name">Name</td> 
       <td> 
        <input type="text" name="name" /></td> 
      </tr> 
      <tr> 
       <td id="subject">Subject</td> 
       <td> 
        <input type="text" name="subject" /></td> 
      </tr> 
      <tr> 
       <td id="ExaminationNumber">ExaminationNumber</td> 
       <td> 
        <input type="text" name="ExaminationNumber" /></td> 
      </tr> 
      <tr> 
       <td> 
        <input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td> 
       <td> 
        <input type="reset" name="Reset" value="Reset" /></td> 
      </tr> 
     </table> 
    </form> 
</body> 
</html> 
+0

由於某種原因,我在我原來的一個做,但不是在這裏是什麼都錯了嗎? – 2013-10-18 12:45:55

+0

他們在但仍然沒有工作,還有什麼幫助? JavaScript正在運行,因爲它正在改變顏色,但沒有顯示錯誤消息? – 2013-10-18 13:07:46

+0

@SamanthaMclemon:當你可能指'msg + =(...)'時,你在幾個地方寫'msg +(...)'。 – 2013-10-20 09:30:08

-1

有幾個原因,你的問題的代碼片段將失敗。我要指出的一些缺陷:

  1. 不應該有在頭節形式
  2. document.ExamEntry是無效的。正確的將是document.forms['ExamEntry']
  3. 類似document.ExamEntry.subject是不可能的。鏈接子節點不起作用。 DOM需要使用提供的DOM方法遍歷。我建議您閱讀諸如http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/

我已經修改了JavaScript和包括了jsFiddle,使驗證工作的教程。這是一個快速修復。我增加了一個叫做getInputByName一個輔助功能:

<script type="text/javascript"> 

function getInputByName(inputName) { 
    var inputs = document.getElementsByTagName('input'); 

    for (var i = 0, ii = inputs.length, input; i < ii, input = inputs[i]; i++) { 
     if (input.name === inputName) { 
      return input 
     } 
    } 
    return false; 
} 



function validateForm() { 

    var result = true; 

    var msg=""; 

    if (getInputByName('name').value=="") { 
     msg+="you must enter your name \n"; 
     getInputByName('name').focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 


    if (getInputByName('subject').value=="") { 
     msg+("You must enter the subject \n"); 
     getInputByName('subject').focus(); 
     document.getElementById('subject').style.color="red"; 
     result = false; 
    } 

    if (getInputByName('ExaminationNumber').value=="") { 
     msg+("You must enter the Examination Number \n"); 
     getInputByName('ExaminationNumber').focus(); 
     document.getElementById('ExaminationNumber').style.color="red"; 
     result = false; 
    } 

    if (msg == ""){ 
     return result; 
    } else { 
     alert(msg) 
     return result; 
    } 
} 
</script>