2014-10-10 2 views
0

최근에 HTML과 JavaScript를 사용하고 있으며 폼 유효성을 검사하는 함수를 호출하는 HTML 파일에 연결된 외부 javascript 파일이있는 양식을 만들려고합니다. 내 문제는 특정 필드가 채워지거나 양식이 잘못 제출되면 내 양식에서 경고하지 않는 것입니다. 여기HTML과 자바 스크립트를 사용하는 양식

는 내가 지금까지 무엇을 가지고 :

HTML :

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title> Project 2 Submission Form </title> 
    <meta charset="UTF-8"> 

    <script type="text/javascript" src="test.js" language="javascript"> 
    </script> 

</head> 

<body> 

    <form id="myForm" action=""> 

    <table width="250" border="0" align="left"> 
     <tr> 
     <form name="myForm" action="mailto:[email protected]" method="post" onsubmit="return Validate();"> 
      <td> 
      <table width="100%" border="0"> 
       <tr> 
       <td colspan="3"> 
        <center><strong>Please Fill Out the Information Below</strong> 
        </center> 
       </td> 
       </tr> 
       <tr> 
       <td width="50">First Name</td> 
       <td width="5">:</td> 
       <td width="300"> 
        <input name="firstname" type="text" id="FirstName" required> 
       </td> 
       </tr> 
       <tr> 
       <td>Last Name</td> 
       <td>:</td> 
       <td> 
        <input name="Last Name" type="text" id="LastName"> 
       </td> 
       </tr> 
       <tr> 
       <tr> 
        <td>Middle Name (Optional)</td> 
        <td>:</td> 
        <td> 
        <input name="Middle Name" type="text" id="MiddleName"> 
        </td> 


        <tr> 
        <td>Age</td> 
        <td>:</td> 
        <td> 
         <input name="Age" type="text" id="Age"> 
        </td> 
        </tr> 

        <tr> 
        <td>Sex</td> 
        <td>:</td> 
        <td> 
         <input name="Sex" type="text" id="Sex"> 
        </td> 
        </tr> 


        <tr> 
        <td>Birth Date</td> 
        <td>:</td> 
        <td> 
         <input name="BirthDate" type="text" id="BirthDate"> 
        </td> 
        </tr> 

        <tr> 
        <td>Height</td> 
        <td>:</td> 
        <td> 
         <input name="Height" type="text" id="Height"> 
        </td> 
        </tr> 

        <tr> 
        <td>Weight</td> 
        <td>:</td> 
        <td> 
         <input name="Weight" type="text" id="Weight"> 
        </td> 
        </tr> 

        <tr> 
        <td>Salary</td> 
        <td>:</td> 
        <td> 
         <input name="Salary" type="text" id="Salary"> 
        </td> 
        </tr> 


        <tr> 
        <td>Email</td> 
        <td>:</td> 
        <td> 
         <input name="Email" type="text" id="Email"> 
        </td> 
        </tr> 


       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td> 
        <input type="submit" name="submit" value="Submit Form"> 
        </td> 



       </tr> 
      </table> 
      </td> 
     </form> 
     </tr> 
    </table> 
    </form> 
</body> 

</html> 

자바 스크립트 : 나는 크롬과 IE,하지만 행운을 모두 사용하여 검사를하지

<script> 
function Validate() 
{ 
    var fName = document.myForm.fName; 
    var lName = document.myForm.lNAme; 
    var mName = document.myForm.mName; 
    var age = document.myForm.age; 
    var sex = document.myForm.sex; 
    var birth = document.myForm.birth; 
    var hght = document.myForm.hght; 
    var wght = document.myForm.wght; 
    var sal = document.myForm.sal; 
    var email = document.myForm.email; 



     if (fName.value == ""){ 
     alert("This field cannot be left blank."); 
     fName.focus(); 
     return false; 
     } 

     if (lName.value == ""){ 
     alert("This field cannot be left blank"); 
     lName.focus(); 
     return false; 
     } 


     if (age.value == ""){ 
     alert("This field cannot be left blank"); 
     age.focus(); 
     return false; 
     else if (age.value <1 || >99({ 
      alert("Please re-enter your age"); 
      return false; 
     } 

     } 



     if (sex.value == ""){ 
     alert("This field cannot be left blank"); 
     sex.focus(); 
     return false; 
     else if(sex.value != "Male" || "male" || "M" || "m" || "Female" || "female" || "F" || "f"){ 
      alert("The sex you have entered is not entered correctly, please try again."); 
      return false; 
    } 

    } 


     if(birth.value == ""){ 
      alert("Date of birth cannot be left blank."); 
      birth.focus(); 
      return false; 
      else if(birthdate != "mm/dd/yyyy"){ 
      alert("Enter the format in mm/dd/yyyy format); 
      return false; 
     } 

     } 



     if (hght.value == ""){ 
      alert("This field cannot be left blank"); 
      hght.focus(); 
      return false; 
     else if(hght <2 || > 7){ 
      alert("please enter your height in feet in inches in following format: x.y"); 
      return false; 
    } 


     } 



     if (wght.value == "") 
    { 
     alert("This field cannot be left blank"); 
     wght.focus(); 
     return false; 
     else if(weight < 0){ 
     alert("please enter a valid weight in pounds."); 
     return false; 
    } 

    } 



     if (sal.value == "") 
    { 
     alert("This field cannot be left blank."); 
     sal.focus(); 
     return false; 
     else if(sal.val.indexOf("$") != 0){ 
      alert("Please insert a dollar sign in the beginning of the entry"); 
      return false; 
     } 
      else if(sal.val <0 || >999999.99){ 
       alert("Please re-enter your salary"); 
       return false; 
      } 

    } 




     if (email.value == "") 
    { 
     alert("Please enter your email address."); 
     email.focus(); 
     return false; 
    } 
    else{ 
    return true; 
    } 
} 
</script> 

. 아무도 나에게 무슨 일이 일어나고이 양식을하려고 할 수있는 잘못된 연습이나 다른 연습에 대한 통찰력을 줄 수 있습니까?

+0

자바 스크립트 코드를 디버그하십시오. 오류가 쉽게 발생합니다. – Kishan

답변

1

두 개의 <form> 태그가 있습니다. 두 번째 것을 첫 번째 위치로 옮기고 첫 번째 것을 삭제하십시오.

...
<form name="myForm" action="mailto:[email protected]" method="post" onsubmit="return Validate();"> 

<table width="250" border="0" align="left" > 
<tr> 
<td> 
<table width="100%" border="0" > 
<tr> 
<td colspan="3"><center><strong>Please Fill Out the Information Below</strong></center></td> 
</tr> 
<tr> 

...

편집 추가 : 당신은 또한 부적절하게 태그를 중첩하는 것이 대부분으로 인해 유효성 검사 오류의 무리를 가지고있다. HTML 문제의 경우 맨 먼저해야 할 일은 http://validator.w3.org으로 HTML의 유효성을 검사하고 오류를 수정하는 것입니다.

다른 편집 : var fName = document.myForm.fName;을 코딩했는데 HTML에는 그런 것이 없습니다. 다른 변수 선언과 유사합니다. document.getElementById() 메서드를 찾아 변수 포인터를 선언 할 때 사용하십시오.

+0

Bob 고맙습니다. 나는이 기회를주고, 내가 가지고있는 이상한 모든 문제를 해결할 수 있는지 알아볼 것입니다. – Sweaver

+0

제출 문제가 수정되었지만 첫 번째 텍스트 필드를 채우고 나머지는 비어있는 경우에도 다른 문제는 발생하지 않습니다. 어떤 문제가 발생할 수 있습니까? – Sweaver

+0

@jmart : HTML 오류를 수정 했습니까? 그렇지 않다면 먼저 해보십시오. 그런 다음 Chrome의 개발자 도구 또는 Firefox의 Firebug를 사용하여 JavaScript가 무엇인지 확인하십시오. –

관련 문제