-1

I am trying to setup validation using the $('#form').validate. most examples use document.ready for this. since my page is dynamically loaded I cant use document.ready.

Also most examples of $(#div).on('event') use the click event, is it possible to bind the 'load' event?

<div id="DivWhichIsntLoadedDynamically">
<div id="DynamicallyLoadedDiv">

<form id="myform">  
     <input type="text" name="entry[email]" />  <br/>  
     <input type="text" name="field2" /> <br/> 
     <input type="submit" />
</form>

</div>
</div>

$('#DivWhichIsntLoadedDynamically').on('load', function () {
    alert('div load');

    $('#myform').validate({
        rules: {
            'entry[email]': {
                email: true
            },
            field2: {
                equalTo: '[name="entry[email]"]'
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

http://jsfiddle.net/JCY2E/6/

updated fiddle: http://jsfiddle.net/JCY2E/8/

Improve this question
6
  • Show us the real code that dynamically loads the form. Commented Jun 21, 2014 at 16:46
  • I still don't understand why you refuse to show the code that loads the content. Commented Jun 21, 2014 at 17:34
  • my apologies but it is not easy to create that much code on JSFiddle. Say we have a side bar full of links loaded dynamically depending on list of urls of partial view(asp.net MVC) given. Those links load content in the middle-right section of page. In some of those content there can be forms with controls which needs to be validated. Commented Jun 21, 2014 at 18:08
  • The answers from linked question may work, but believe me I have been searching for solution since last 2 days and I could not find that question with my keywords. Commented Jun 21, 2014 at 18:22
  • Bottom line, no matter how you can do it, you can only call .validate() after the form is created. Commented Jun 21, 2014 at 18:53

2 Answers 2

Reset to default
0

jQuery allow you to attach an event on a parent container. See jQuery API on. Like that, you can attach an event on a content which isn't currently loaded.

$("#containerWhichIsntLoadDynamically").on("myEvent", "#myform", myFunction);
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The problem is that you cannot attach the .validate() method to anything that does not yet exist. There is no workaround, because one is not needed. Simply call .validate() after creating the form.
0

Quote OP:

"I am trying to setup validation using the $('#form').validate ... since my page is dynamically loaded I cant use document.ready."

You cannot attach the .validate() method to anything that does not yet exist. There is no workaround, because one is not needed, and there is no need to bind any events.

You would simply call the .validate() method immediately after dynamically loading your form. Since you never show exactly how you're loading this dynamic content, my answer uses a generic button as one example.

$(document).ready(function () {

    $('#test').on('click', function () {  // generic button -> trigger demo

        // load the form dynamically
        $('#notificationContainer').html('your form markup');

        // now you can initialize the plugin
        $('#myform').validate({ ... });

    });

});

DEMO: http://jsfiddle.net/DNZ9Y/

Improve this answer

6 Comments

This may not work for me, since I do not have access to document.ready. I will update my code to show a container which is not dynamically loaded. can I use a load event of that to setup validation?
@krprasad, none of this is making any sense the way you're explaining it. Show the code that dynamically loads the form.
Div DynamicallyLoadedDiv and its content are loaded dynamically. and I want to include the JavaScript inside this div. And I want all forms inside this div to have their own validate setup.
@krprasad, Then the answer is no, you cannot do it like that.
Thanks sparky but I am thinking of doing it another way: I will put the validation rules(data-rule-email="true") with the controls/elements and will simply use foreach to loop through each form and call validate on it, I can do this in document.ready since it is a generic global strategy. This should work right?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.