Link to home
Start Free TrialLog in
Avatar of andieje
andieje

asked on

Ajax call which returns a form which needs validating

Hello

I am asking this question in response to this excellent comment from another question given here

https://www.experts-exchange.com/questions/28425079/Templating-without-a-template-system.html?anchorAnswerId=40063666#a40063666

I asked a question along these lines recently. I must be on the right track as I am actually writing my forms in the way suggested in this comment. However I am coming to adding the validation (using jquery validation module).

Where would the validation go? Here is the validation for the form returned by the ajax call. The form does inside the modal but where does thecode go that validates the form? Does it matter where it does on the page? I presume it can go after the form in the modal. I normally put it in the jquery document ready as shown below for a normal form.

Where does this code need to go if the form came from an ajax call and document ready is not called. Could it just go in a script tag in the modal? I presume there is not reason why, if this is the case, it could not use a jquery getscript call?

I say that because what if I want the same validation in a form that could be loaded in a normal page or by an ajax call (see comment with 10 upvotes here - http://stackoverflow.com/questions/2200540/document-ready-not-executed-for-ajax-loaded-content - the OP seems to have the same concerns as me.

Many thanks for your help


<script>
 
 
 jQuery(document).ready(function(){


jQuery("#modCustomer").validate({
   highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');
	  
    },
	submitHandler: function (form) {
       
		return false;   
    }
  });
 
 jQuery.validator.addMethod("exactlength", function(value, element, param) {
 return this.optional(element) || value.length == param;
}, jQuery.format("Please enter exactly {0} characters."));


jQuery('#cpe_view').autogrow();
jQuery('#customer_view').autogrow();
jQuery('#strategy').autogrow();


});	
</script>

Open in new window

Avatar of Sammy
Sammy
Flag of Canada image

You should jQuery's on http://api.jquery.com/on/ to bind your validations to the loaded ajax form.
on allows you to attach an event handler function for one or more events to the selected elements prior to being loaded in the DOM
Avatar of andieje
andieje

ASKER

Hi, I dont think that was really what I was asking unless i have misunderstood.

The question is where to put the jquery validaton for a modal form returned by an ajax call. It cant go in the jquery doc ready of the original page so where does it go? Does it just go in script tags after the modal fom.

Many thanks
That's exactly what I was referring to.
By using jQuery's on function, you don't need to worry about when the form is loaded to the DOM.

$(document.body).on('click', '#MyFormSubmitButton', function(){
       $("#MyformID").validate({
          submitHandler: function() {
              // do whatever you need here
         } 
    });
 });

Open in new window

Replace MyFormSubmitButton with your submit button Id (the one loaded using Ajax) and MyformID with the form loaded using Ajax.
Avatar of andieje

ASKER

So i use the on function and not the document ready?

What if the form is used in many difference pages? I previously tried loading jquery with getscript but it caused errors to some of the components on my page (datatables if i remember rightly didnt like it). How can i reuse the validation if the form is reused?

Many thanks
The script I used uses document.ready first then wires the event using the on function.
Place the script where it's accessible to all pages then you can use it.
Avatar of andieje

ASKER

I'm sorry but I struggle with jquery and I dont really understand your last answer. I understood what you said about using the on function. But then I wondered how I could make the validation code reusable if the form was used in multiple places.

So take your code

$(document.body).on('click', '#MyFormSubmitButton', function(){
       $("#MyformID").validate({
          submitHandler: function() {
              // do whatever you need here
         } 
    });
 });

Open in new window


For example can i load a javascript file from within the anonymous function?

$(document.body).on('click', '#MyFormSubmitButton', function(){
     //load reusable validation code 
    });
 });

Open in new window


Also can I add variable names into the jquery in case the form has a different id

$(document.body).on('click', '#MyFormSubmitButton', function(){
       $(variable_name).validate({
          submitHandler: function() {
              // do whatever you need here
         } 
    });
 });

Open in new window


I hope that makes sense. If this requires me to open another question(s) I will happily do so.
ASKER CERTIFIED SOLUTION
Avatar of Sammy
Sammy
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of andieje

ASKER

I would want to put the validation in a function so I could make it modular and reuse it on the different pages that the form appears - or have i misunderstood where the best place for the javascript is. It was all i could think of to make the validation reusable. Am i being stupid and I could just add a named function to the submit handler which I can reuse on multiple pages

so using your example again is this correct?

var variable_name=$("#mydiv").id;

$(document.body).on('click', '#MyFormSubmitButton', function(){
       $('#' + variable_name).validate({
          submitHandler: myfunctionName
         } 
    });
 });

Open in new window

Thank you for your patience with this question :)
Avatar of Gary
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
Avatar of andieje

ASKER

Hi

I think Sammy has answered my question. The problem is that I misunderstood at the time :0
Avatar of andieje

ASKER

thanks :)