CODEWITHSUNDEEP
jqueryruby-on-railsrubyvalidation
Bozhidar Batsov
Bozhidar Batsov

Reputation: 56665

Accessing client_side_validations validation function manually

I'm working on a Rails 3 app and I'm using client_side_validations(javascript validation generated automatically from the ActiveRecord model validations) in a form displayed in a JQuery UI dialog and I was wondering if there are some javascript functions from client_side_validations that I could call after the user presses the dialog submit(OK) button to verify that all validations in the form pass before submitting the form via javascript. Is there something like this in client_side_validations? I noticed in the wiki a section named Client Side Validations callbacks that looked very interesting, but I didn't see a corresponding javascript file in the gem. Maybe a work in progress or something deprecated?

Basically I have this javascript snippet that creates the dialog containing the form

$(function() {
    $("#subscription_dialog").dialog({
        autoOpen: false,
        show: "blind",
        hide: "blind",
        width: 'auto',
        height: 'auto',
        modal: true,
        title: "Become an Empower United member",
        buttons: {
            "OK": function () {
                if ($('form[data-validate]').validate()) {
                    $('#new_subscription').submit();
                    $(this).dialog("close");
                }
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

    $("#subscribe").click(function() {
        $("#subscription_dialog").dialog("open");
        return false;
    });
});

I need some validation check before the form submit bit, otherwise the dialog would be closed even with invalid data in it. I could write a form with jquery's validation plugin, but I don't want to duplicate the validations from the model layer like this - I'd much rather have them stay in sync all the time.

Thanks in advance for any help you might decide to render!

Upvotes: 2

Views: 2291

Answers (3)

jmarceli
jmarceli

Reputation: 20202

For version 3.2.7 I've added a wiki page about triggering validation for selected input https://github.com/DavyJonesLocker/client_side_validations/wiki/Manually-trigger-input-validation.

The code looks as follow:

$input = $('#validated_input')
$form = $input.closest('form')
$input.data('changed', true).isValid($form[0].ClientSideValidations.settings.validators)

Tested with Rails 4.2.0 app

Upvotes: 1

aBadAssCowboy
aBadAssCowboy

Reputation: 2520

The above answer didn't work for. I have tried looking into their code and finally figured out the answer. 

form_validators = ClientSideValidations.forms[form.attr('id')].validators
form.isValid(form_validators)

This will definitely work.

This is too late. but for those out there like me. This will help.

Upvotes: 5

plainjimbo
plainjimbo

Reputation: 7100

After you complete the client_side_validations installation process (under Install on the github README, make sure to do rails g client_side_validations:copy_assets if on Rails 3.1+) a rails.validations.js file should be dropped into your app/assets/javascripts directory.

This contains the javascript source for the client side validations. If you poke around in there you can see that it binds javascript ajax:beforeSend and submit event handlers to your form.

So they should get called before your form submits automatically.

However, to answer a more generic question about manually triggering validations....

You can call trigger on your form and supply the ajax:beforeSend event to manually trigger validations. You also need to pass in an object with a target attribute containing the form DOM element (because the rails.validation.js source checks to make sure its only responding to events for that form element).

One caveat is that client_side_validations listen to change events and track whether your inputs have changed since the last validation attempt. So, if none of your fields have changed since the last validation, the validations won't be run. In this case you can manually trigger changes as well.

So... On to the code:

   handleAjaxError = function(event, data, status) {
      $("form input").trigger("change");
      $("form").trigger("ajax:beforeSend", { target: this.$("form")[0] });
   };

Admittedly, this feels kind of hacky, triggering a "ajax:beforeSend". You could also call the isValid function directly on your form, but that requires you to pass in the validators, which you can only obtain from the window DOM element:

   formValidationSettings = window[$('form').attr('id')];
   $('form').isValid(formValidationSettings.validators);

Pick your poison

If the handleAjaxError function seems odd, I needed to do this to handle a race-condition for an email uniqueness ajax validation where two users try to register the same email at the same time. Client side ajax validation for uniqueness passes for both users, the first to submit gets success the second gets a server-side validation failure. I wanted the ajax error handler to process failures by re-running validations.

Upvotes: 2

Related Questions