Search code examples
javascriptjqueryformsvalidationjquery-validation-engine

jQuery remove validationEngine at runtime


I'm using the validationEngine script to validate a form. I init it with:

$("#formid").validationEngine();

I do not really submit the form through a submit button. I use an anchor element with an onclick event which calls a saveElement() function. In this function I call:

$("#formid").validationEngine('validate');

which works just fine.

Right after that, I reset the fields (for example, the content of input fields to "") through which the fields which are required start showing errors.

To prevent those errors from occurring, I would like to remove the validationEngine from the form element. But I just can't remove it. I tried various options, including the ones below, but none of them worked.

$('#formid').validationEngine('hideAll'); // To hide the error messages
$('#formid').validationEngine('detach');  // To remove the validationEngine

Does anyone have a suggestion how I can remove the validationEngine?

Workaround

It really seams like there is no unbind method. I've added a issue into the github project. Maybe they will implement an unbind method: https://github.com/posabsolute/jQuery-Validation-Engine/issues/287

As a workaround I came up with the following solutions: You could either:

  • Use jQuery.clone() to copy the form without the events, remove the original form and add the validationEngine to the form again
  • Remove the validation classes on the form elements, store them in an array and insert them again after resetting the form

Still open

Maybe there is a better solution or workaround. If you know one, please let me know.


Solution

  • I think you're really overengineering things. This may not be the answer you expected, but here is what I think you should do:

    Firstly, on the anchor element to submit, do this :

    $('#anchorElement').click(function() {
        $('#formid').submit()
    })
    

    Then, you can do it like this to remove the form after submitting it:

    $('#formid').submit(function() {
        // Do your submitting stuff, like validating.
        $(this).remove()
        // Or use $(this).hide() if you simply want to hide it.
    })
    

    But I wouldn't advocate the method of using an anchor element. Nicely degrading is a must for almost every website.

    The problem is, when your user won't have javascript enabled, your form will never be submitted.

    Btw, it looks like there is no "unbinding" of validationengine. See here for a solution: Remove JQuery validationEngine from form