web-dev-qa-db-ja.com

DIVのjQuery検証プラグイン

この質問 への答えに示されているように、divで validate plugin を使用しようとしています。

<script type="text/javascript">
  $("#pseudoForm").validate({
    onfocusout:true,
    rules:{
      first_name:"required",
      last_name:"required"
    }
  });
</script>
<!-- whatever -->
<div id="pseudoForm">
  <input type="text" name="first_name"/>
  <input type="text" name="last_name"/>
</div>

フォーム内にすべてあります。

さまざまなブラウザでさまざまなエラーが発生しています。

  • Firefox：未定義のバリデーター
  • IE8： 'settings'はnullまたはオブジェクトではありません
  • Chrome：未定義のプロパティ「設定」を読み取ることができません

どんな助けも感謝します！

javascriptjqueryjquery-validate
31
JohnIdol

これは聞きたい答えではありませんが、他の答えは間違っています（投稿されたときは正しいかもしれませんがそれ以降、いくつかの主要なjQuery検証プラグインの変更）。

検証プラグイン は（現在）<form>で動作するように設計されており、onlyは<form>で動作するように設計されています。 すべてのプラグインドキュメント は他の汎用コンテナではなくフォームを参照していることにも注意してください。

プラグイン自体はvalidator.currentFormを内部的に追跡します。これは、渡されたセレクターのthisを参照し、 .elements などを取得します...他の方法では機能しません、現在のバージョンの記述方法ではありません。

ここでの全体的なソリューション/代替アプローチ：<form>要素での .validate() （のjQueryラッパーむしろ）直接、他のコンテナではありません。 <form>を分割する必要がある場合は <fieldset> 要素を使用し、ユーザーに表示されない入力フィールドを検証したくない場合は、おそらく.validate()でignore: ':hidden'オプションを使用します。

54
Nick Craver

開いた jquery.validate.jsまたはjquery.validate.min.jsおよびfind（ctrl + F） "label"およびreplaceAllを必要なタグとともに：

例：div

その後、検証を実行します。

0
Rushabh Jariwala

閉じかっこがありません。代わりにこれを試してください：

$("#pseudoForm").validate({
    onfocusout:true,
    rules:{
        first_name:"required",
        last_name:"required"
    }
});
0
treeface
//HTML

<div class="form-group has-feedback col-xs-8 " style="padding-right:0px">
                <input type="tel" class="form-control" name="Otp_MobileNo" id="mobileNo" placeholder="Mobile No."  minlength="10" maxlength="10">
                <span id="mobileno_message"  style="display:none;color: red;">Please enter a valid Mobile No</span>
            </div>


    //Java Script
     $("#getOtp").click(function(){
         jQuery(document).ready(function(){





            var MobileNo = jQuery("#mobileNo").val();
            var MobileNoLength = MobileNo.length;  
            var zipRegex = /^\d{10}$/;
             var mobileNo = $("#mobileNo").val();

            if (!zipRegex.test(MobileNo))
            { 
               jQuery('#mobileno_message').show();


            }
            else
            { 

              // success!

                 jQuery('#mobileno_message').hide();
                 $.ajax({
                type : 'POST',
                url  : '<?php echo site_url('Login/send_otp'); ?>',
                data : {Otp_MobileNo:mobileNo,},
                dataType    : 'json',
                beforeSend: function()
                { 
                  $("#error").fadeOut();
                },
                success :  function(response)
                { 
                alert(response.message_text);
                $("#check-otp").delay().animate({
                    height: 'toggle',
                  },
                  "slow");
                $("#getOtp").hide();
                }
             });





            }

          });



           });
0
Inam Habib

クラスごとにフォームを選択すると、同じエラーが発生する可能性があります

$(".form_class").validate(...

iD $("#form_id").validate(...の代わりに

またはタグ名$("form").validate(...

0
tomas.satinsky