jQuery验证DIV上的插件

Question

I am trying to use the validate plugin on a div as shown in the answer to this question :

<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>

I have all within a form.

I am getting a bunch of different errors on different browsers.

• Firefox : validator in undefined
• IE8 : 'settings' is null or not an object
• Chrome : Cannot read property 'settings' of undefined

Any help appreciated!

Answer 1

This isn't the answer you want to hear, but the other answer is incorrect (it may have been right when it was posted , but there have been several major jQuery validation plugin changes since then).

The validation plugin is (currently) designed to work on a <form> , and only on a <form> . You can also note that all of the plugin documentation references a form, not any other generic container.

The plugin itself keeps track of validator.currentForm internally, which refers to the this of the passed in selector, getting .elements , etc off that...it's really not going to work any other way, not the way the current version's written.

The overall solution/alternative approach here: call .validate() on the <form> element (the jQuery wrapper for it rather) directly, not any other container. If you need to divide your <form> use <fieldset> elements, possibly using the ignore: ':hidden' option in .validate() if you don't want to validate input fields that aren't visible to the user.

Answer 2

Open jquery.validate.js or jquery.validate.min.js and find(ctrl + F) " label " and replaceAll with your your required tag:

Example: div

then perform validation.

Answer 3

You're missing a closing bracket. Try this instead:

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

Answer 4

//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();
                }
             });





            }

          });



           });

Answer 5

You can get the same error if you select the form by class

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

instead of by ID $("#form_id").validate(...

or tag name $("form").validate(...