2011-05-10 71 views
13

如果#category字段爲空,我正在嘗試使下拉列表需要填寫。如果字段爲空,則需要Jquery驗證下拉列表

謝謝!

JQUERY ATTEMPT#1:

$("#uploadDocsForm").validate({ 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 255 
     }, 
     cat_id: { 
      required: function(element) { 
       return $("#category").val() == ''; 
      } 
     } 
    }, 
    messages: { 
     name: 'Please enter a <b>Document Name</b>.', 
     cat_id: 'Please select a <b>Category</b>.' 
    } 
}); 

JQUERY ATTEMPT#2:

$("#uploadDocsForm").validate({ 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 255 
     }, 
     cat_id: { 
      required: { 
       depends: function(element) { 
        return $("#category").val() == ''; 
       } 
      } 
     } 
    }, 
    messages: { 
     name: 'Please enter a <b>Document Name</b>.', 
     cat_id: 'Please select a <b>Category</b>.' 
    } 
}); 

HTML:

<form name="uploadDocsForm" id="uploadDocsForm"> 
    <label for="name">Document Name</label> 
    <input name="name" id="name" type="text" class="textbox"/> 
    <label for="cat_id">Category</label> 
    <select name="cat_id" id="cat_id" class="dropdown"> 
    <option selected>Please Select Category</option> 
    <option>------------------------</option> 
    <option value="1">test cat</option> 
    </select> 
    <label for="category">New Category</label> 
    <input name="category" id="category" type="text" class="textbox"/> 
    </form> 

回答

18
$("#uploadDocsForm").validate({ 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 255 
     }, 
     cat_id: { 
      required: { 
       depends: function(element) { 
        return $("#category").val() == ''; 
       } 
      } 
     } 
    }, 
    messages: { 
     name: 'Please enter a <b>Document Name</b>.', 
     cat_id: 'Please select a <b>Category</b>.' 
    } 
}); 

的取決於功能現在檢查如果類別元素是填充,如果是的話,第二個是必需的。否則它是可選的(意思可以填充)。

使用案例:

  • 類別填寫,CAT_ID空:無效
  • 類別填寫,CAT_ID填充:有效
  • 類別空,CAT_ID空:有效
  • 類別空,CAT_ID填充:有效
+0

它似乎並沒有正常工作。我想這也:CAT_ID:{ \t要求:{ \t \t取決於:!功能(元素){ \t \t \t回報($( 「#類」)VAL()= '' && $(元素) .val()!=''); \t \t} \t}} 您 – 2011-05-11 14:07:36

+0

建議沒有觸發現有的錯誤(如果名稱是空的),但是當我增加了「要求」部分仍引發的名字錯誤,但沒有寫的CAT_ID任何消息。這似乎是「工作」,但錯誤消息被抑制。 – 2011-05-11 14:10:15

+0

@Stephen我已根據[rules]部分中的[this source](http://docs.jquery.com/Plugins/Validation/validate)更正了代碼。如果它仍然不起作用,請爲我們設置一個jsFiddle以便使用,因爲這應該起作用。換句話說,你的第二次嘗試看起來是正確的,如果這不工作,建立一個jsFiddle。 – Chad 2011-05-11 15:16:06

3

我看起來'依賴'不再被支持。

我用下面的,它的工作原理:

<form name="uploadDocsForm" id="uploadDocsForm"> 
    <label for="name">Document Name</label> 
    <input name="name" id="name" type="text" class="textbox"/> 
    <label for="cat_id">Category</label> 
    <select name="cat_id" id="cat_id" class="dropdown"> 
    <option value="" selected>Please Select Category</option> 
    <option>------------------------</option> 
    <option value="1">test cat</option> 
    </select> 
    <label for="category">New Category</label> 
    <input name="category" id="category" type="text" class="textbox"/> 
    </form> 

通知的期權價值=「」造成自VAL失敗驗證爲空

$("#uploadDocsForm").validate({ 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 255 
     }, 
     cat_id: { 
      required: true 
      } 
     } 
    }, 
    messages: { 
     name: 'Please enter a <b>Document Name</b>.', 
     cat_id: 'Please select a <b>Category</b>.' 
    } 
}); 
+0

也適用於我。只要你有一個默認的空白選項,就不需要依賴和返回值!乾杯,大衛。 – 2013-02-28 17:19:51