Is there a validation success event?

[Niraj pandey]

I am trying to disable the Submit Input button with the following code:

jQuery('.form').submit(function(){
      jQuery(this).find('input[type=submit]').prop('disabled', true).val('Submitting...');
});

But when the validation is enabled and if it fails, it still changes the button to 'Submitting' after disabling it since it is called on every Submit event.

Is there some sort of event (like onValidationSuccess) I could use before running the above function?

[Robert Pösel]

There is no custom event from LiveFormValidation.

Probably the event/callback should be called inside here: https://github.com/Robyer/nette-live-form-validation/blob/master/live-form-validation.js#L1003-L1013

If you could prepare some nice pull request for this, that would be good :)

[Roland Toth Pal]

You can also check if there's any error and step out if there is any, eg.

if (typeof(Nette) != 'undefined' && Nette.validateForm) {
        if (!Nette.validateForm(form)) {
            return false;
        }
    }

You'll need to pass the "form" object (plain JS).

[Niraj pandey]

@rolandtoth Excuse my noobness in JS but I would put that in my own script and not live-form-validation.js?

[Niraj pandey]

@Robyer If I can manage it, I would do one but please don't hold your breathe :)

[Roland Toth Pal]

@nirpan Yes, it should be put in your own script. Wrap it in a function that receives the "form" as an argument, and call this function in your .submit() function.

[Niraj pandey]

So I got up to this and was wondering if this is correct? Not sure if I am passing the right 'form' object.

function isFormValidated(form) {
  if (typeof(Nette) != 'undefined' && Nette.validateForm) {
    if (!Nette.validateForm(form)) {
      return false;
    }
  }
  return true
}

jQuery('.form').submit(function(){
  if (isFormValidated(jQuery('.form'))){
    jQuery(this).find('input[type=submit]').prop('disabled', true).val('Sending...');
  }
});

[Roland Toth Pal]

It may be the right form you pass if you have only one ".form" on the page. I think it would be better to reference it by ID.

Also note that live form validation needs a plain JS object and not jQuery object, so you need to pass it this way:

if (isFormValidated(jQuery('.form').get(0))){

Otherwise it looks OK to me but you'll see it if you try.

[Robert Pösel]

I would rewrite it simply like this:

jQuery('.form').submit(function(){
  if (isFormValidated(this)){
    jQuery(this).find('input[type=submit]').prop('disabled', true).val('Sending...');
  }
});

IMHO there is no need to search for the form itself again :)

[Roland Toth Pal]

Plus the isValidated function could be also simplified like this (completely untested!):

function isFormValidated(form) {
    return window.Nette && Nette.validateForm && Nette.validateForm(form);
}

[Niraj pandey]

So I did a few test and the following code does what I want.

function isFormValidated(form) {
  return window.Nette && Nette.validateForm && Nette.validateForm(form);
}

jQuery('.form').submit(function(){
  if (isFormValidated(this)){
    jQuery(this).find('input[type=submit]').prop('disabled', true).val('Sending...');
  }
});

Interestingly, when I used the initial code for isValidated function, it kept disabling the button and setting the value to 'Sending' every time I clicked the 'Submit'. Using the latest code from @rolandtoth, it disables the button only when the form is fully validated which is what I expected.

Thanks to @Robyer and @rolandtoth for such a great response :)