자바 스크립트를 사용하여 HTML 양식 유효성 검사

Question

HTML에서 javascript를 사용하여 약간 새로운 기능이 추가되었습니다. 내가 HTML 스크립트를 사용하여 javascript를 사용하여 유효성을 검사하고 싶지만 내가 작성한 것은 작동하지 않는 것 같습니다. 아무도 내가 잘못 가고있어 말할 수 있습니까 ???

<script type="text/javascript"> 
function mandatoryFields() 
{ 
var x=document.forms["add"]["contract_id"].value 
if (x==null || x=="") 
    { 
    alert("Please Enter the Contract Title"); 
    return false; 
    } 
var x=document.forms["add"]["storydiv"].value 
if (x==null || x=="") 
    { 
    alert("Please Enter a Sprint"); 
    return false; 
    } 
var x=document.forms["add"]["storydiv"].value 
if (x==null || x=="") 
    { 
    alert("Please Enter a Story"); 
    return false 
    }   
var x=document.forms["add"]["date1"].value 
if (x=="" || x==null) 
    { 
    alert("Please Enter a time"); 
    return false 
    } 

</script> 

그리고 여기에 해당 HTML 스크립트

<form name="add" action="time-sheet/insert-time-sheet.php" method="post" onsubmit="return mandatoryFields()"> 
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2"> 
    <tr> 
    <td colspan="2">&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="150">Select Date:</td> 
    <td width="336"><input name="date" type="text" value="YYYY-MM-DD" maxlength="100" class="datepick" id="date1" /></td> 
    </tr> 
    <tr> 
    <td>Contract:</td> 
    <td><SELECT NAME="contract_id" onChange="getSprint(this.value)"><OPTION VALUE=0>--- Select Contract ---<?php echo $options_contract?></SELECT></td> 
    </tr> 
    <tr> 
    <td>Sprint:</td> 
    <td><div id="sprintdiv"><select name="sprint" > 
    <option>--- Select Sprint ---</option> 
     </select></div></td> 
    </tr> 
    <tr> 
    <td>Story:</td> 
    <td><div id="storydiv"><select name="story"> 
    <option>--- Select Story ---</option> 
     </select></div></td> 
    </tr> 
    <tr> 
    <td>Dev Time:</td> 
    <td><input name="dev_time" size="20" onkeyup="ondalikSayiKontrol(this)" /></td> 
    </tr> 
    <tr> 
    <td>PM Time:</td> 
    <td><input name="pm_time" size="20" onkeyup="ondalikSayiKontrol(this)"/></td> 
    </tr> 
    <tr> 
    <td colspan="2"><table width="182" border="0" align="center" cellpadding="2" cellspacing="2"> 
     <tr> 

     <td width="68"><input name="Submit" type="submit" id="Submit" value="Add Time Sheet" /></td> 
     <td width="48"><label> 
      <input type="reset" name="reset" value="Reset" /> 
     </label></td> 
     <td width="46"><div align="center"><a href="javascript:history.go(-1);">Back</a></div></td> 
     </tr> 
     <input type="hidden" name="day" value="<?php echo $day; ?>" /> 
     <input type="hidden" name="employee_id" value="<?php echo $employee_id; ?>" /> 
    </table></td> 
    </tr> 
    <tr> 
    <td colspan="2">&nbsp;</td> 
    </tr> 
</table> 
</form> 

사전에

감사입니다 : 다음은 자바 스크립트입니다!

Answer 1

함수에 닫는 중괄호가 없습니다. 브라우저에서 오류 콘솔을 확인하면 mandatoryFields()이 정의되지 않았 음을 알 수 있습니다. 닫는 중괄호를 추가하면이를 수정합니다. 유효성 검사가 실패하지 않으면 true을 반환해야합니다. 마지막으로, 각각의 전에 x를 다시 선언해야합니다. 오류가 발생했는지는 확실하지 않지만 여전히 수정해야합니다. 모든 필드를 잘 때

<script type="text/javascript"> 
function mandatoryFields() 
{ 
    var x=document.forms["add"]["contract_id"].value; 
    if (x==null || x=="") 
    { 
     alert("Please Enter the Contract Title"); 
     return false; 
    } 
    x=document.forms["add"]["storydiv"].value; 
    if (x==null || x=="") 
    { 
     alert("Please Enter a Sprint"); 
     return false; 
    } 
    x=document.forms["add"]["storydiv"].value; 
    if (x==null || x=="") 
    { 
     alert("Please Enter a Story"); 
     return false; 
    } 
    x=document.forms["add"]["date1"].value; 
    if (x=="" || x==null) 
    { 
     alert("Please Enter a time"); 
     return false; 
    } 
    return true; // ADD THIS 
} // ADD THIS 
</script> 

Answer 2

귀하의 madatoryFields() 기능은 진정한을 반환하지 않습니다. here에서

:

이벤트 핸들러 형태 오브젝트 태그의 onsubmit 속성에 의해 호출되는 경우, 코드는 창 함수를 사용하여 리턴 값을 요청 명시해야하며, 이벤트 핸들러가 제공해야 이벤트 핸들러 함수에서 각 가능한 코드 경로에 대한 명시 적 return 값.

Answer 3

오른쪽 요소를 가져 와서 스프린트 및 스토리 내부의 옵션에 대한 루프를 수행하십시오. 양식의 이름과 선택 상자의 이름을 사용하여 요소에 곧바로 액세스 할 수 있습니다.

var x = document.add.contract_id.value; 
if(){ 
... your stuff here 
} 

이름 속성을 사용하지 않고 첫 번째 양식에 액세스 할 수도 있습니다.

x = document.forms[0].contract_id.value; 

가능한 옵션을 통해 스프린트 루프가 발생하면 알려주십시오.

x = document.add.sprint; 
var selected = false; 
for (i = 0; i < x.length; ++i){ 
    if (x.options[i].selected == true) 
     selected = true; 
} 
if(!selected){ 
    alert("Select a story please!"); 
    return false; 
} 

x = document.add.story; 
selected = false; 
// same procedure 

또한에서 getElementById() 및 (getElementsByTagName 통해 소자), 후자 복귀 모든 유사한 요소들의 어레이를 액세스 할 수있다.

document.getElementById('storydiv').getElementsByTagName('story')[0]; 

document.getElementsByTagName('contract_id')[0]; 

모든 유효성 검사 단계에서 var x을 다시 선언하지 마십시오.