2

My imported form will not validate using JQuery's $(form).validate() plugin.

I followed the example provided from this question and got the form working successfully. I moved my form to /html/external.html (I like to keep my main site in one file, index.php, and all my external forms/elements in a separate one), and calling the validation function did not work.

function validateForm() {
    $('#registerForm').validate({
        //rules
        ...

        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: url,
                data: $(form).serialize(), // Fixed typo
                success: function () {
                    alert('succss')
                }
            })
            return false;
        }
    })
}

$(document).ready(function() {
    validateForm() // Validating the form on page load
})

$(document).on('click', '.toFormScreen', function() {
    $('#welcome').remove() // Yes, #welcome was imported as well if the user was not logged in
    $('#mainContainer').load('./html/external.html #registerForm')
    validateForm();
})

The above does not work, because it cannot find the form element, being in a different file that's not imported on page load.

I tried adding the validation function below the load: validateForm() and that still doesn't work.

Is it possible to $(e).validate({...}) a form that has been imported/appended by a user at any given time after the page loads from an external HTML file?

EDIT: https://jqueryvalidation.org/ is the plugin I'm using.

Tom Jaquo
  • 85
  • 1
  • 2
  • 10
  • Try destroy before you create another validation https://jqueryvalidation.org/Validator.destroy/ Is this your plugin? – jcubic Feb 14 '19 at 16:56
  • What do you mean by form.sterialize? – Dominik Domanski Feb 14 '19 at 17:08
  • @jcubic Yes, I'm using that plugin. I don't see the use in calling destroy if the form doesn't exist, unless you want me to call it twice. I'm only calling the validator once as of now. I tried it once in the `$(document).ready()`, which failied, but I currently have it after the form is imported. – Tom Jaquo Feb 14 '19 at 17:10
  • @Dmitry Domanski The example https://stackoverflow.com/a/15625824/9599400]showed I'm pretty new to AJAX and I'm just learning as I go. As far as I can tell, `form.serialize` isn't called yet, but when it is, I thought it gets the data from the inputs. – Tom Jaquo Feb 14 '19 at 17:14
  • @TomJaquo you've made a typo - look more closely at the example in your link, you'll see it should be serialize() not steralize(). see also https://api.jquery.com/serialize/ (the method is not part of AJAX, although it's often used to help with the process of sending data via AJAX). Anyway, Rory's answer below is the correct solution to your main problem. – ADyson Feb 14 '19 at 17:16
  • I just noticed that. Thanks, will update. The error still occurs, but I guess I managed to miss a future one. – Tom Jaquo Feb 14 '19 at 17:17
  • Yes, that what I was trying to point out) – Dominik Domanski Feb 14 '19 at 18:16

1 Answers1

4

The issue is because load() is asynchronous. Therefore you're instantiating validate() on #registerForm before it has been created in the DOM.

To fix this you need to place the call to validateForm within the callback of load():

$(document).on('click', '.toFormScreen', function() {
  $('#welcome').remove()
  $('#mainContainer').load('./html/external.html #registerForm', function() {
    validateForm();
  });
})
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339