JQuery驗證時選擇

如何選擇框時驗證其他字段。我已經嘗試了下面，但無濟於事。我只想在選擇Horse或Pony時驗證AnimalName2。在此先感謝。JQuery驗證時選擇

HTML：

<select class="vars" data-hint="" name="Registration2"> 
    <option data-price="0.00" selected="selected" value=""> 
    None 
    </option> 

    <option data-price="5.00" value="Horse"> 
    Horse 
    </option> 

    <option data-price="5.00" value="Pony"> 
    Pony 
    </option> 
</select> <span class="clear">clear</span> 

<div class="quarter"> 
    <label style="font-weight: bold; display: inline;">Name</label><br> 
    <input autocomplete="off" data-hint="" maxlength="254" name="AnimalName2" 
    placeholder="" type="text"> 
</div>

我使用jquery.validate.min.js

<script> 
(function($, W, D) { 
    var JQUERY4U = {}; 
    JQUERY4U.UTIL = { 
     setupFormValidation: function() { 
     //form validation rules 
     $("#addriderform").validate({ 
      rules: { 
      AnimalName2: { 
       required: "Registration2:selected" 
      }, 
      agree: "required" 
      } 
      submitHandler: function(form) { 
      form.submit(); 
      } 
     }); 
     } 
    } 
    //when the dom has loaded setup form validation rules 
    $(D).ready(function($) { 
    JQUERY4U.UTIL.setupFormValidation(); 
    }); 
})(jQuery, window, document); 
</script>

來源

2014-07-22 user3052324

我加入了答案，U可以檢查出來？ –

是的，這工作完美！非常感謝你。 – user3052324

什麼是AB？ :) –

給id來下拉菜單中，使用jQuery的depends參數驗證：

工作小提琴HERE

HTML

<form id="addriderform" method="post"> 
<select class="vars" data-hint="" name="Registration2" id="Registration2"> 
    <option data-price="0.00" selected="selected" value=""> 
    None 
    </option> 

    <option data-price="5.00" value="Horse"> 
    Horse 
    </option> 

    <option data-price="5.00" value="Pony"> 
    Pony 
    </option> 
</select> 
    <span class="clear">clear</span> 

<div class="quarter"> 
    <label style="font-weight: bold; display: inline;">Name</label><br> 
    <input autocomplete="off" data-hint="" maxlength="254" name="AnimalName2" 
    placeholder="" type="text"/> 
    <input type="submit"/> 
</div> 
    </form>

jQuery的

//form validation rules 

    $("#addriderform").validate({ 
     rules: { 
     AnimalName2: { 
      required: { 
       depends: function(element) { 
        if($("#Registration2").val() != "")//If Pony or Horse selected 
        { 
        return true; 
        } 
        else 
        { 
        return false; 
        } 
       } 
      } 
     }, 
     //Registration2:{required:true} 
     }, 
    messages: { 

     AnimalName2: { 
      required: "Please fill TEXTBOX" 
     }, 
     Registration2:{ 
      required: "Please select DROPDOWN ."  
     } 

    }, 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent()); 
    }, 

     submitHandler: function(form) { 
     form.submit(); 
     } 
});

這意味着「AnimalName2」這個文本框需要屬性取決於其內部的條件。查看下面它檢查是否選擇「None」.IF從下拉菜單中選擇無，返回false，意味着必需屬性變爲false，否則變爲true，所以驗證適用於文本框。

function(element) { 
        if($("#Registration2").val() != "")//If Pony or Horse selected 
        { 
        return true; 
        } 
        else 
        { 
        return false; 
        } 
       }

如需更多信息，請檢查HERE

來源

2014-07-23 04:41:10

嗨，你可以做+1 Upvote如果問題解決了，謝謝:) –

JQuery驗證時選擇

回答

相關問題