2011-12-03 16 views
4

jqueryのvalidateプラグインで作業を開始したばかりですが、期待通りに動作させることができませんでした。jquery validator with select not working

私は誰が一体、私が間違ってやっているものを私に伝えることができますか?http://jsfiddle.net/GWABv/3/

に位置フィドルの例アップを持っていますか私は、ユーザーがドロップダウンリストでオプションを選択することを要求しようとしていますが、値を選択しなくても、フォームが有効であると返されます。

HTML:

<form id="roadForm" method="get" action=""> 
    <p> 
     <label for="editRoad_ProjectClassification"> 
      <em class="red">*</em> Project Classification: 
     </label> 
     <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification" title="Please select something!" validate="required:true"> 
      <option value="">Please select</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </p> 
</form> 
<label class="FUNC_saveRecord"> 
    <span class="icon iconSave"></span> 
    <span class="title">Save</span> 
</label> 

はJavaScript:

$('.FUNC_saveRecord').click(function() { 
    saveRecord(); 
}); 


function saveRecord() { 
    var roadFormValidator = $('#roadForm').validate(); 
    if (!roadFormValidator.valid()) { 
     roadFormValidator.showErrors(); 
    } 
    else { 
     alert('form is valid'); 
    } 
} 

答えて

5

あなたがここにいくつかの問題を抱えて:

  1. formは、開始タグにスペルが間違って( <focm>このように表示されます
  2. フィールドにclass='required'属性を追加する必要があります。 validate=required:trueはそれをしません。
  3. clickが発生するたびにvalidateに電話する必要はありません。ちょうどdocument.readyで一度それを呼ぶだけで十分です。
  4. この場合、手動でshowErrorsを呼び出す必要はありません。プラグインは自動的にこれを行います。

    HTML::

    <form id="roadForm" method="get" action=""> 
    <p> 
        <label for="editRoad_ProjectClassification"> 
         <em class="red">*</em> Project Classification: 
        </label> 
        <select id="editRoad_ProjectClassification" name="editRoad_ProjectClassification" title="Please select something!" class="required"> 
         <option value="">Please select</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
        </select> 
    </p> 
    </form> 
    <label class="FUNC_saveRecord"> 
        <span class="icon iconSave"></span><span class="title">Save</span> 
    </label> 
    

    はJavaScript:

    $("#roadForm").validate(); 
    
    $('.FUNC_saveRecord').click(function() { 
        saveRecord(); 
    }); 
    
    
    function saveRecord() { 
        var roadFormValidator = $('#roadForm'); 
        if (roadFormValidator.valid()) { 
         alert('form is valid'); 
        } 
    } 
    

    更新例:ここでは

は、私はあなたのコードを更新してしまう方法ですhttp://jsfiddle.net/hRjJM/

+0

ありがとうございます!これは私の問題を解決しました。 –

+0

@AmandaMyer:問題ありません!喜んで ':)' –