驗證與jQuery驗證和選擇插件的選擇框

Question

我想一起使用驗證和選擇插件。我在驗證選擇框時遇到問題。我發現類似的問題How can I use jQuery validation with the "chosen" plugin?和Chosen.js and validate jquery，但我無法找到一個方法來導入解決方案，以我的代碼：

<form class='myform' id='producteditform'> 
        <input type='hidden' value='<? echo $row['id']; ?>' name='pkedit' id='pkedit'>     
        <input type='hidden' value='save' name='operation' id='operation'> 
        <p><label for='nameedit'>Product Name</label><em>*</em><input id='nameedit' name='nameedit' value='<? echo $row['pname']?>'/></p> 
        <p><label for='unitedit'>Unit</label><em>*</em><? 
         $query="select * from units"; 
         $result=$mysqli->query($query); 
         if($result->num_rows==0) 
         echo "<a href='units.php?operation=insert'>No unit found. Please define a unit first</a>"; 
         else{    
         echo "<select class='chosen' id='unitedit' name='unitedit'>";   
          while($row=$result->fetch_assoc()) 
           echo "<option value='".$row['id']."'>".$row['name']."</option>"; 
          echo "</select>"; 
         } 
         $mysqli->close();    

        ?></p>      
        <p><a class='button' class='button' id='saveedit'>Save</a> 
        <a class='button' id='canceledit' onclick='f()' >Cancel</a></p> 
        </form> 

jQuery代碼

$("#save").click(function() { 
     if($("#producteditform").validate({ 
     ignore: [], 
       rules: { 
        nameedit: { 
        required: true, 
        maxlength:100 

        }, 
        unitedit:{ 
        required: true, 
        } 

       } 
       }).form() 
      ) 
     { 
      // do sth 

       }) 
     } 
} 

HTML渲染輸出

<form class="myform" id="productform" novalidate="novalidate"> 
        <input type="hidden" value="insert" name="operation" id="operation"> 

        <p><label for="name">Product Name</label><em>*</em><input type="text" name="name" id="name"></p> 
        <p><label for="unit">Unit</label><em>*</em><select class="chosen chzn-done" id="unit" name="unit" style="display: none;"><option value="">please choose..</option><option value="1">kgg</option></select><div id="unit_chzn" class="chzn-container chzn-container-single" style="width: 200px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>please choose..</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 198px; top: 24px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 163px;"></div><ul class="chzn-results"><li id="unit_chzn_o_0" class="active-result result-selected" style="">please choose..</li><li id="unit_chzn_o_1" class="active-result" style="">kgg</li></ul></div></div></p> 
        <p><a class="button" id="save">Save</a> 
        <a class="button" id="cancel" onclick="f()">Cancel</a></p>     
        </form> 

時我刪除類='選擇'一切正常時保存按鈕點擊，否則即時通訊錯誤未捕獲錯誤：無法驗證，找到一個沒有名字的元素分配。查看控制檯的元素參考。

Answer 1

嘗試這樣的事情，而不是。

$(document).ready(function() { 

    // initialize the plugin on DOM ready 
    $("#producteditform").validate({ 
     // all rules and options, 
     rules: { 
      nameedit: { 
       required: true, 
       maxlength:100 
      }, 
      unitedit:{ 
       required: true, 
      } 
     } 
    }); 

    // test for valid form 
    $('#save').on('click' function() { 
     if($("#producteditform").valid()) { 
      // do this on valid form 
     } else { 
      // do this on invalid form 
     } 
    }); 

}); 

$('#producteditform').validate() initializes the validate plugin上form。

$('#producteditform').valid() programmatically triggers an actual validation test並返回true/false布爾值。

---

或者，因爲你的event的形式click上submit事件，那麼您只需使用內置submitHandler回調函數。 （有沒有必要建立另一個click處理。）

$(document).ready(function() { 

    // initialize the plugin on DOM ready 
    $("#producteditform").validate({ 
     // all rules and options, 
     rules: { 
      nameedit: { 
       required: true, 
       maxlength:100 
      }, 
      unitedit:{ 
       required: true, 
      } 
     }, 
     submitHandler: function(form) { 
      // do this on valid form 
     } 
    }); 

}); 

完整的文檔：

http://docs.jquery.com/Plugins/Validation

---

直到你展示你的HTML輸出，而不是PHP的，這裏是一個如何驗證select元素的一般示例：

http://jsfiddle.net/6Dt7F/

重要的是，第一個，或在select元素的默認option必須包含value=""或required規則將失敗。

<select name="field1"> 
    <option value="">please choose...</option> 
    <option>option 1</option> 
    <option>option 2</option> 
    <option>option 3</option> 
</select> 

---

編輯：

我還沒有足夠的代碼，以使一個工作演示。但是，由於chosen插件隱藏了實際的表單元素，因此您必須執行以下操作：

1）以將要驗證的實際表單元素爲目標，傳遞數據，而不是視覺元素由chosen創建。

2）Enable jQuery Validate to work on hidden elements通過設置ignore: []選項。

嘗試......

$(document).ready(function() { 

    // initialize the plugin on DOM ready 
    $("#producteditform").validate({ 
     // all rules and options, 
     ignore: [], // <-- option so that hidden elements are validated 
     rules: { 
      name: { // <-- name of actual text input 
       required: true, 
       maxlength: 100 
      }, 
      unit:{ // <-- name of actual select input 
       required: true 
      } 
     }, 
     submitHandler: function(form) { 
      // do this on valid form 
     } 
    }); 

}); 

Answer 2

這是因爲選上插入一個輸入框，用戶可以通過與下拉列表中進行搜索。

出於某種原因，這個搜索領域做不有姓名標籤（因此錯誤）：

<input type="text" autocomplete="off" tabindex="7"> 

輸入沒有一個類或ID或者，這可能是爲什麼控制檯錯誤是如此模糊。一個快速的解決辦法是給它一個名字：

$(".chzn-search input").attr('name', 'chzn-search');