Execute javascript code after nintex form validation completes

  • 19 April 2016
  • 6 replies
  • 34 views

Badge +6

Hello,

I'm looking for a way to execute a jQuery command AFTER the Nintex Form validation completes correctly, but BEFORE the form is submitted. Does anyone know if this is this possible?

I tried using HTML5's if (NWF$('#aspnetForm')[0].checkValidity()) function, but it seems unrelated to Nintex's custom validations...

Thanks in advance!


6 replies

Badge +8

Could you provide an example of what type of function you're trying to accomplish between your form's validation and Save? I'm not aware of any Nintex-specific JavaScript events for this scenario but there may be other ways to accomplish it.

Depending on your needs, you could use unload but that's going to fire as you navigate away from the page regardless of what causes you to leave your form (Save, Cancel, etc.).

You could also wrap up your function inside custom javascript validation for your form (see Custom Validation for Nintex Forms) and invoke it in tandem or immediately following.

Badge +6

Hey Patrick,

Thanks for the suggestion, I tried the unload() function and got back a notification as soon as the form was submitted, but unfortunately it was not successful for what I needed it...

My problem is, my form contains a Nintex dropdown control which is populated via jQuery from code-behind. If I try to submit the form without first DISABLING this dropdown control, I get a SharePoint exception "Sorry, something went wrong - An unexpected error has occurred" because of cross-site Event validation.

As a workaround, I attached a function to the save/submit buttons which disabled the dropdown control, and the form was submitted correctly. HOWEVER, if any of the validations were triggered, the form was not submitted but the dropdown was still disabled!

That's why I'm looking for a way to trigger the function AFTER the Nintex validation has completed successfully... any ideas?

Badge +8

Thanks for the info Themos K​! I'm not sure this will be helpful in your current scenario, but I have recently encountered a similar problem while building a form-based NCAA bracketology challenge (NCAA bracket in Nintex Form ).

My approach to this problem was to use custom JavaScript validation and keep the "Submit" button itself disabled until all validation conditions were met.

This approach requires a little more custom code to validate your fields on .change or .keyup​ but does allow you to disable your dropdown(s) safely without fear of validation bringing you back with your fields in a bad state.

Badge +6

Hey Patrick,

Thanks for the link, however I would very much rather use the Nintex validations since they are available to me grin.png

I finally figured it out after going through the form's code via F12's DOM Explorer:

  1. (optional) Instead of attaching a function to the save/submit buttons, use NWF$(document).submit(function () { ... }
  2. (important) Before disabling the dropdown lists, check if (NWF$('.nf-validation-summary').css('display') == 'none') { ... }
Badge +8

Grats! I didn't think about conditionally triggering the disabling of your dropdown. I'll have to bookmark this in case I come across a similar issue in the future. happy.png

Thanks!

Badge +4

This is exactly what I want to do, I tried the above and the dropdowns are not disabled: the css display ==none does not work even if the validation summary is empty. It is always 'block'. However when I debug I hit the statement if (NWF$('.nf-validation-summary').css('display') == 'none')

Button Submit - client click NWF$(document).ready(function(){Buttons.onSave();});

javascript

NWF$(document).ready(function()
{
some logic...
});

var Buttons = {
onSave: function () {
DropDowns.disableAll();
}
};


var DropDowns = {
// Disables all choice controls (pt2 : workaround for invalid view-state)
disableAll: function () {
if (NWF$('.nf-validation-summary').css('display') == 'none')
{
NWF$('.customDropDown').prop('disabled', true);
}
}
}

Thanks

Kalpana

Reply