Jquery selectbox unqiue를 확인하고 필요 여부를 확인합니다.

Question

jquery 유효성 검사 플러그인을 사용하여 선택 상자를 고유하고 필수로 선택했습니다.

그러나, 독특한 검사가 필요한 모든 및 검사에서 작동하지 않는 첫 번째 선택 상자 만 작업,

방법이 문제를 해결하는 것입니다?

JQuery와

 $("#insertResult").validate({ 
    rules: { 
     'select[]': { 
       required: true, 
       unique: true 
      } 
     }, 
    }); 

HTML 업데이트

<form id="insertResult" method="post" action="excelSQL.php" > 
     <select id="selectField0" name="select[]" style="float:left"> 
         <option selected="" value="">Select one</option> 
    <option value="Email">Email</option> 
    <option value="1_Name2">1_Name2</option> 
    </select> 


    <select id="selectField1" name="select[]" style="float:left"> 
    <option selected="" value="">Select one</option> 
    <option value="Email">Email</option> 
    <option value="1_Name2">1_Name2</option> 
    </select> 
</form> 

주셔서 감사합니다 : 내가 이전에 수행 한 JS 파일을 편집하고 난 selectField0 또는 selectField_0, 여전히 운 시도

checkForm: function() { 
     this.prepareForm(); 
     for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
      if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) { 
       for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) { 
        this.check(this.findByName(elements[i].name)[cnt]); 
       } 
       } else { 
      this.check(elements[i]); 
     } 
     } 
    return this.valid(); 

},

Answer 1

이것은 jQuery 유효성 검사기의 일반적인 문제점입니다. 이 문제를 해결 방법은 두 가지가 있습니다

방법 항목 :

수정 JQuery와 유효성 검사기 플러그인은이 지침에 따라 모두 처리 할 수 ​​있도록 : http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/

방법 2 :

을 각 선택 항목에 개별적으로 검사기를 적용하십시오.

HTML :

,451,515,

<form id="insertResult" method="post" action="excelSQL.php" > 
    <select id="selectField0" name="select[]" style="float:left" class="error"> 
     <option selected="" value="">Select one</option> 
     <option value="Email">Email</option> 
     <option value="1_Name2">1_Name2</option> 
    </select> 

    <select id="selectField1" name="select[]" style="float:left"> 
     <option selected="" value="">Select one</option> 
     <option value="Email">Email</option> 
     <option value="1_Name2">1_Name2</option> 
    </select> 
    ... 
</form> 

자바 스크립트 :

$("#insertResult").find("select").each(function() { 
    $(this).validate({ 
     rules: { 
      'select[]': { 
       required: true, 
       unique: true 
       } 
     } 
    }); 
}); 

방법 # 3 :

의 jQuery 플러그인은 기본적인 작업에 매우 유용 할 수 있지만, 어떤 경우에는, 당신이 5 월을하려고하는지 사실 플러그인의 의도와는 거리가 있습니다. "라이브러리 코드 수정"과 같은 솔루션을들을 때마다 해당 라이브러리가 저를위한 것이 아닌 것 같아요. 이는 변경 사항의 복잡성과 플러그인 또는 최신 버전으로 업데이트 할 때 작업이 중단 된 이유를 동료 또는 후임자가 파악하지 못할 가능성에 따라 다릅니다.

따라서, 방법 # 3는 모두 JQuery와 유효성 검사기를 비켜 만 기본 유효성 검사를 용이하게하기 위해 jQuery를 사용

자바 스크립트 :

<select id="selectField0" name="select[]" style="float:left" class="error"> 
    <option selected="" value="">Select one</option> 
    <option value="Email">Email</option> 
    <option value="1_Name2">1_Name2</option> 
</select> 

<select id="selectField1" name="select[]" style="float:left"> 
    <option selected="" value="">Select one</option> 
    <option value="Email">Email</option> 
    <option value="1_Name2">1_Name2</option> 
</select> 
<span class="error2" style="display:none">These are required fields</span> 
<span class="error1" style="display:none">Fields must be unique</span> 

<input type="submit" name="submit" value="submit" /> 

위의 코드 것입니다 : HTML은

// submit handler for form 
    $('#insertResult').submit(function(event) { 

     // if either field is not selected, show error and don't submit 
     if(itemNotSelected($('#selectField0'), $('#selectField1')) == true) { 

      $('.error2').css("display","block"); 
      event.preventDefault(); 
      return false; 

     } else if(isEqual($("#selectField0"), $("#selectField1")) == true) { 

      $('.error2').css("display","none"); 
      $('.error1').css("display","block");alert("afda") 
      event.preventDefault(); 
      return false; 

     } 
    }); 

    // hide error text on focus of element 
    $('#selectField0, #selectField1').focus(function() { 
     $('.error2, .error1').hide(); 

    }); 

// helper methods to check if both fields are equal 
function isEqual(elem1, elem2) { 
    return (elem1.find("option:selected").html() == 
      elem2.find("option:selected").html()); 
} 

// helper methods to check if one field (or both) is not selected 
function itemNotSelected(elem1, elem2) { 
    return (elem1.find("option:selected").html() == "Select one" || 
      elem2.find("option:selected").html() == "Select one"); 
} 

다음 조건에 해당하는 경우에만 양식을 제출하십시오.

• 두 선택 상자에는 항목이 선택되어 있습니다. 이것은 "필수"조건을 충족시킵니다.

• 선택 항목이 같지 않고 "고유"조건을 충족합니다.

• 사용자가 선택 상자에 포커스를 맞추면 오류가 사라집니다.

• 사용자가 위의 조건에 해당되는 제출하지 않고 제출하려고하면

  은, 다음과 같은 오류가 표시됩니다 : 하나 이상의 선택 상자를 선택하지 않으면

• 에서, "이 요구되는 분야"메시지가 표시됩니다.

• 둘 모두 같고 선택한 경우 "필드는 고유해야합니다"라는 메시지가 표시됩니다.