2011-08-04 19 views
0

jquery.validateで問題が発生しています。 1ページに2つの書式があります。最初のフォームは画像アップロードです。 ajaxは投稿をハイジャックし、画像をアップロードして画面に戻し、次に第2の形式の隠れた入力(vLogo)を画像名で更新します。Jquery Validation 2フォーム

私がしたいのは、非表示の入力が空白で、2番目のフォームの検証時に必要に応じて最初のフォームの要素が強調表示されている場合です。私はそれが理にかなったことを願ううまくいけば、誰かが私を助けることができます。ここ は、フォームの例です。

FORM 1 - 画像アップロードフォーム

<form class="logoform" id="mLogo"> 
    <tr> 
     <td> 
      <div id="logoContainer"> 
       <span id="logoarea"> <img id="thumb" width="100px" height="100px" src="images/logo_placeholder.gif" border="0"></span> 
      </div> 
     </td> 
     <td colspan=2> 
      <table cellspacing=0 cellpadding=3 border=0> 
       <tr> 
        <td class="field"><input type="file" name="upload1" id="upload1" class="required"></td> 
       </tr> 
       <tr> 
        <td align="right"><input type="submit" value="Add Logo" name="addlogo" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"></td> 
       </tr> 
       <tr> 
        <td class="flabel"><label for="volvoLogo">Logo Upload</label></td> 
       </tr> 
      </table> 
     </td> 
    </tr>   
</form> 

FORM 2データ収集

<form id="customcal" action="processCal.cfm" method="post"> 
    <tr> 
     <td colspan=3 class="flabel"><label for="c_dealerName">Dealer Name</label></td> 
    </tr> 
    <tr> 
     <td colspan=3 class="field"><input type="text" name="c_dealerName" class="required"></td> 
    </tr> 
    <tr> 
     <td class="flabel"><label for="c_phone">Phone</label></td> 
     <td colspan=2 class="flabel"><label for="c_fax">Fax</label></td> 
    </tr> 
    <tr> 
     <td class="field"><input type="text" name="c_phone" class="required phone"></td> 
     <td class="field" colspan=2><input type="text" name="c_fax" class="required phone"></td> 
    </tr> 
    <tr> 
     <td colspan=3 class="flabel"><label for="c_website">Website Address</label></td> 
    </tr> 
    <tr> 
     <td colspan=3 class="field"><input type="text" name="c_website" class="required"></td> 
    </tr> 
    <input type="hidden" name="vLogo" id="vLogo" class="required"> 
    <tr> 
     <td colspan=3 align="right"><input type="submit" value="Submit" id="subform" name="submit" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"></td> 
    </tr> 
</form> 

jQueryのバリデーション、これまで

$("#customcal").validate({ 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 

     if (errors) { 
      var message = errors == 1 
       ? 'You missed 1 field. It has been highlighted below' 
       : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    onkeyup: false,  
    submitHandler: function() {   
     $("div.error").hide();     
     form.submit();  
    } 
}); 
+0

私は好きではないテーブルを参照してください。 http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html –

答えて

0

まずあなたのフォームに共通のクラスを与える必要があります.form_validateまたは何かジェネリック。

フォームの各ループを実行し、その項目に検証を適用します。

$('.form_validate').each(function(i, form){ 

    $(form).validate({ 

     /* Your Validation Code */ 

    }); 

});