jQuery 유효성 검사 플러그인 : 드롭 다운의 유효성을 검사하는 방법

Question

jQuery 유효성 검사 플러그인을 사용하여 드롭 다운의 유효성을 검사하려고합니다. 나머지 양식을 올바르게 검증합니다. 그러나 드롭 다운에서는 작동하지 않습니다.

다음

$('#campaignForm').validate({ 
    rules: { 
     campaign_name: { 
      required: true 
     }, 
     html_url: { 
      required: { 
       depends: function(element) { 
        return $('#html_url').val() == 'none'; 
       } 
       } 
     } 
    }, 
    messages: { 
     campaign_name: 'Please enter a campaign name', 
     html_url: 'Please select a template' 
    } 
}); 

내 HTML됩니다 :

<select name="html_url" id="html_url"> 
<option value="none">Select One...</option> 
... 
</select> 

내가 뭘 잘못하고 여기에

내 jQuery를 무엇입니까? 변수 이름이 어떻게 든 충돌합니다. 캠페인 이름 규칙이 올바르게 작동합니다. 당신은 단지 select 요소 required를 확인하려면

Answer 1

, 당신은하지 않기 때문에 다른 요소에 "따라"depends:를 사용하지 않을 것입니다. 사용하는 경우 depends 속성은 required 규칙을 단순히 토글하는 것입니다. 여기에있는 문제는 required 규칙이 아닙니다 ... 토글 할 필요가 없습니다. 모든 옵션에 이미 value이 포함되어있는 경우 required 규칙이 작동하지 않습니다. 이는 required이 항상 만족되기 때문입니다.

기본 옵션으로 value=""을 사용하고 규칙을 다른 요소와 마찬가지로 설정하십시오.

<option value="">Select One...</option> 

jsFiddle DEMO

HTML :

<form id="campaignForm"> 
    <select name="html_url" id="html_url"> 
     <option value="">Select One...</option> 
     <option value="one">ONE</option> 
     <option value="two">TWO</option> 
    </select> 
    <input type="submit" /> 
</form>​ 

jQuery를 : 불꽃 말했듯이 어떤 이유로 공백으로 값을 설정할 수없는 경우

$(document).ready(function() { 
    $('#campaignForm').validate({ 
     rules: { 
      html_url: { 
       required: true 
      } 
     }, 
     messages: { 
      html_url: { 
       required: 'Please select a template' 
      } 
     } 
    }); 
});​ 

Answer 2

, 기본 필수 사전 설정 대신 사용자 고유의 JQuery 유효성 검사 함수를 추가 할 수 있습니다.

$.validator.addMethod("aFunction", 
    function(value, element) { 
     if (value == "none") 
      return false; 
     else 
      return true; 
    }, 
    "Please select a value"); 

$('#campaignForm').validate({ 
    rules: { 
     campaign_name: { 
      required: true 
     }, 
     html_url: { 
      aFunction: true 
     } 
    }, 
    messages: { 
     campaign_name: 'Please enter a campaign name', 
     html_url: 'Please select a template' 
    } 
});