jQuery validate plugin on DIV

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!

Answers:

Answer

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

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

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

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

Answer

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





            }

          });



           });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.