Execute JavaScript on Save only when form is valid

How are you going to know when the Form is Valid? 

Typically, you test Form Validity when the user presses the Submit button, and I would argue that it is the easiest point at which to begin checking whether or not the form is good. 

Below is some code that I have on a List Item Form. It creates an Alert Dialog with a message asking whether or not the person would *actually* like to Submit this Form so that other people can begin work on it. However, if the user hits cancel or it turns out that the Form is not in a Valid State, it will simply prevent you from submitting it (and will subsequently HIDE the Validation Summary table that typically appears when you Validate the Form). 

Otherwise, if the Form is Valid, it will first change the value of a Form Control that is used to 'Lock' the form from further tampering from that point on. 

I have added some extra comments to this code to make it more apparent where all of this is happening, but it should be rather straight forward and easy enough to do what you'd like to do. 

(You can add the code to a Submit Button like so): 

Example 1:

(function(event) {

  /* Create an Alert for the User */

  /*  
    If the User clicks on Cancel, myAlert = false
    Otherwise if they click on OK, myAlert = true
  */
  var myAlert = confirm("Do you *really* wanna submit this form?");

  /*
    The built in Function Page_ClientValidate() returns false if the Form is NOT valid.
    It will return true if the Form IS valid.
  */ 

  /* 

    In the following 'If' statement we're checking to see if the user Cancled the Alert dialog, 
    or if the Form IS NOT valid. Please note that we're Inverting these bools so !false === true. 
    I'm also turning OFF the Invalid Controls Summary Table using the line: 

      NWF$(".nf-validation-summary").hide().length > 0

    Which not only Hides it, but also returns true.
  */ 
  if (!myAlert || (!Page_ClientValidate() && NWF$(".nf-validation-summary").hide().length > 0)) {
    /* 
      Because we don't want anything else to happen, we can stop this event from bubbling and being
      handled elsewhere
    */
    event.preventDefault();
  } else {

    /*
      Otherwise we can execute our COOL CODE right here! 
    */ 
    NWF$("#" + lockedDownID).prop("checked", true);
  }
}(event));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you don't want the Alert and you don't care about the Validation Summary, you could use something like this: 

(function(event) {
  if (!Page_ClientValidate()) {
    event.preventDefault();
  } else {
    /* Put code here that you want to run when the page is valid */
  }
}(event));‍‍‍‍‍‍‍

I hope it helps! 

PS: If you'd like to do other things like Validation Highlighting, please see the function that Caroline Jung wrote in their comment here: https://community.nintex.com/thread/11554#comment-75684 

Thanks.  And sorry for not checking back sooner.    For first example while a bit more complicated and harder to understand is more complete.   I like the event argument.   That was exactly what I needed but this is how I went.

NWF.FormFiller.Events.RegisterAfterReady(function ()
{

    NWF$( document ).submit(function( event )
    {     
     // This funtion will execute after the submit button is pressed and after the validation is complted.  
     
        
      var detail = NWF$("#" + JS_ctrlTxtReviewerComments).val();
       if ((NWF$('.nf-validation-summary').css('display') == 'none')  && detail != "")
       {  
            // OK we are valid do stuff
                 
               
             
        }              

     });
 });