이 Javascript 양식 검증 스크립트를 수정하는 방법은 무엇입니까?

Question

나는 양식 유효성 검사에 대해 다음 자바 스크립트를 사용하고 있습니다 :

<script type="text/javascript"> 
function validate_form () 
{ 
    valid = true; 

     if (document.contact_form.contact_name.value == "") 
     { 
       alert ("Please fill in the 'Your Name' box."); 
       valid = false; 
     } 

     if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) 
     { 
       alert ("Please choose your Gender: Male or Female"); 
       valid = false; 
     } 

     if (document.contact_form.age.selectedIndex == 0) 
     { 
       alert ("Please select your Age."); 
       valid = false; 
     } 

     if (document.contact_form.terms.checked == false) 
     { 
       alert ("Please check the Terms & Conditions box."); 
       valid = false; 
     } 

     return valid; 
} 
</script> 

양식을 :

<form name="contact_form" method="post" action="somepage.php" onSubmit="return validate_form();"> 

<h1>Please Enter Your Details Below</h1> 

<p>Your Name: <input type="text" name="contact_name"></p> 

<p>Your Gender: <input type="radio" name="gender" value="Male"> Male 
&nbsp; <input type="radio" name="gender" value="Female"> Female</p> 

<p>Your Age: 

<select name="age"> 
    <option value="">Please Select an Option:</option> 
    <option value="0-18 years">0-18 years</option> 
    <option value="18-30 years">18-30 years</option> 
    <option value="30-45 years">30-45 years</option> 
    <option value="45-60 years">45-60 years</option> 
    <option value="60+ years">60+ years</option> 
</select> 

<p>Do you agree to the Terms and Conditions? 
<input type="checkbox" name="terms" value="Yes"> Yes 

<p><input type="submit" name="send" value="Send Details"></p> 

</form> 

이 필드를하지 않은 어떤 지적하는 또 다른 후 하나 개의 경고 상자가 표시됩니다 제외하고 유효성 검사가 잘 작동 채워지거나 선정되었습니다.

모든 누락 된 필드와 같은 ONE 경고 상자에서 지적되도록이 스크립트를 수정할 수 있습니다 방법 : 이름, 성별, 나이, 이용 :

다음 필드를 입력 해주세요 조건

Answer 1

을 (문자열이나 배열을 사용하여 아래 예와 같이 오류 필드를 누적하여 내용을 기반으로 경고 문과 반환 값을 생성합니다 (예 :

function validate_form() { 
    var invalid=[], form=document.contact_form; 
    if (form.contact_name.value == "") { 
    invalid.push('Name'); 
    } 
    if ((form.gender[0].checked == false) && (form.gender[1].checked == false)) { 
    invalid.push('Gender'); 
    } 
    if (form.age.selectedIndex == 0) { 
    invalid.push('Age'); 
    } 
    if (form.terms.checked == false) { 
    invalid.push('Terms and Conditions'); 
    } 
    if (invalid.length > 0) { 
    alert('Please fill in the following fields: ' + invalid.join(', ') + '.'); 
    return false; 
    } 
    return true; 
} 

Answer 2

실제로 document.form.Foo 구문에 의존하지 말고 id 요소의 요소를 제공하고 getElementById를 사용하여 선택해야합니다. 어쨌든 "

function validate_form(){ 
    var valid = true, 
     errors = []; 

    if (document.contact_form.contact_name.value == "") { 
     error.push("Please fill in the 'Your Name' box."); 
     valid = false; 
    } 

    if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) { 
     errors.push("Please choose your Gender: Male or Female"); 
     valid = false; 
    } 

    if (document.contact_form.age.selectedIndex == 0) { 
     errors.push("Please select your Age."); 
     valid = false; 
    } 

    if (document.contact_form.terms.checked == false) { 
     errors.push("Please check the Terms & Conditions box."); 
     valid = false; 
    } 

    if(errors.length > 0){ 
     alert('Errors:\n' + errors.join('\n')); 
    } 

    return valid; 
} 

Answer 3

더 나은는 jQuery validation plugin에 대한 이동합니다. 그것은 쉬운 유연한, 정직하고 구현하기가 매우 빠르게.

을 그렇지 않으면 @Evan이 기술을 제안 사용합니다.

Answer 4

function validate_form () 
{ 
    valid = true; 
    var myArray= new Array(); 

     if (document.contact_form.contact_name.value == "") 
     { 
       myArray.push('Name'); 
       valid = false; 
     } 

     if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) 
     { 
       myArray.push('Gender'); 
       valid = false; 
     } 

     if (document.contact_form.age.selectedIndex == 0) 
     { 
       myArray.push('Age'); 
       valid = false; 
     } 

     if (document.contact_form.terms.checked == false) 
     { 
       myArray.push('Term & Conditions'); 
       valid = false; 
     } 
     if (valid==false) 
      alert ("Please fill in the following fields: "+myArray); 
     return valid; 
} 

)

단순한

function validate_form () 
{ 
    var myArray= new Array(); 
     if (document.contact_form.contact_name.value == "") 
       myArray.push('Name'); 
     if ((document.contact_form.gender[0].checked == false) && (document.contact_form.gender[1].checked == false)) 
       myArray.push('Gender'); 
     if (document.contact_form.age.selectedIndex == 0) 
       myArray.push('Age'); 
     if (document.contact_form.terms.checked == false) 
       myArray.push('Term & Conditions'); 
     if (myArray.length>=0){ 
      alert ("Please fill in the following fields: "+myArray); 
      return false; 
    } 
     return true; 
}