jQuery validate plugin on 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!

score 55 · Accepted Answer · answered Feb 08 '11 at 20:27

55

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.

answered Feb 08 '11 at 20:27

Nick Craver

623,446
136
1,297
1,155

1

this is the answer I needed, thanks. I just needed a final word on the topic. Would you be able to provide a link to a question showing that alternative solution or to copy paste a sample in here, or maybe that should be another question? :) – JohnIdol Feb 09 '11 at 10:11
What if I don't submit the form and instead have a simple button (which doesn't post the form) and I explicitly validate using .validate() on the click of that button? Is that possible? – IsmailS Sep 13 '11 at 10:04
@Ismail - In that case, you still use `.validate()` initially to rig up the validation, then use `.valid()` which checks if the form is valid according to the rules you setup. You can read more on that function here: http://docs.jquery.com/Plugins/Validation/valid – Nick Craver Sep 13 '11 at 10:11
Hi, I am getting the exactly same error but I dint call any validate method.... is there any clue why the error is still shown?? My question is here: http://stackoverflow.com/questions/8473650/error-validator-is-undefined-occured-when-edit-drop-down-list-using-jeditable Thanks in advance.... – shennyL Dec 12 '11 at 12:16
FYI to future readers: the `contenteditable` attribute is supported as of version 1.15.0 – Sparky Mar 13 '17 at 15:16

score 0 · Answer 2 · edited Mar 31 '17 at 22:09

0

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.

edited Mar 31 '17 at 22:09

Juan Serrats

1,358
5
24
30

answered Mar 31 '17 at 14:06

Rushabh Jariwala

9
1

1

Living life in the fast lane – kravits88 Apr 13 '18 at 02:04

score 0 · Answer 3 · answered Feb 08 '11 at 17:32

0

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

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

answered Feb 08 '11 at 17:32

treeface

13,270
4
51
57

sorry the bracket was missing from the question but its in my code, corrected now. thanks – JohnIdol Feb 08 '11 at 18:24

score 0 · Answer 4 · answered Jul 24 '19 at 12:23

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





            }

          });



           });

score 0 · Answer 5 · answered Apr 23 '11 at 21:44

0

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

answered Apr 23 '11 at 21:44

tomas.satinsky

821
7
4

jQuery validate plugin on DIV

5 Answers5

Linked

Related