cancel
Showing results for 
Search instead for 
Did you mean: 
omar_taha
Nintex Newbie

Re: JavaScript to trigger form validation rules

Jump to solution

There is nothing t share, when I click next button, I gave the next button to trigger a custom javascript function, and in that function, I call the inputs and make sure that they are not empty, and no vaiolatoins in the inputs, such as email, I checked if it is in correct email format, and so on, if the validation succeed, meaning there is no wrong inputs, I show the next panel.

0 Kudos
Reply
omar_taha
Nintex Newbie

Re: JavaScript to trigger form validation rules

Jump to solution

If you need more details on how to do this in nintex forms, please contact me.

Regards

0 Kudos
Reply
Automation Master
Automation Master

Re: JavaScript to trigger form validation rules

Jump to solution

I have recently been looking into how I could force page validation before a form was submitted, in order to do some asynchronous in the event that it was. 

The only solution I have found is to invoke the following function

Page_ClientValidate();

You can also specify a Validation Group, like

Page_ClientValidate("NfValidationGroupctl00PlaceHolderMainformFiller");

but I have not been able to figure out the significance of doing it this way, nor have I run into an issue by not including it. 

Now. There are a few issues using this method. Once you run this, it'll run through validation, but it will not highlight any of the fields using the ".nf-error-highlight" css class. Meaning that all of your invalid fields will look as if they haven't been validated. 

On the flip side, it will create the "Please address the following:" error div at the top of the form, and list every field that is currently invalid. So, please keep that in mind!

In my case this is beneficial. I can run the following code once the page has loaded

Page_ClientValidate();
NWF$("#ctl00_PlaceHolderMain_formFiller_ctl02").hide()‍‍‍‍‍‍;‍‍

which will set the initial validation state of the page, and will hide the 'fields to validate' error div that comes up. Then you just need to add some code for the submit event, and you can immediately un-hide that div, so everything will act as it would normally. I'm currently using this set up: 

NWF.FormFiller.Events.RegisterAfterReady(function() {
  "use strict";

  Page_ClientValidate();
  NWF$("#ctl00_PlaceHolderMain_formFiller_ctl02").prop("manuallyHidden", true).hide();

  NWF$(".nf-disableonsubmit[commandtype~='Save']").on("click", function() {
    if (!Page_ClientValidate()) {
      if (NWF$("#ctl00_PlaceHolderMain_formFiller_ctl02").prop("manuallyHidden")) {
        NWF$("#ctl00_PlaceHolderMain_formFiller_ctl02").prop("manuallyHidden", false).show();
      }
      console.log("Page is NOT valid!");
    } else {
      console.log("Page is VERY valid!");
    }
  });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This invokes the validation on the page. Then puts a property on the Invalid Fields div element called "manuallyHidden", sets that property to true, and hides said div. 

Upon pressing a button that has a command type containing the word Save (which is any button for Save or Save and Submit), it will check if the page is valid once more.

If it fails, the it looks to see if the "manuallyHidden" property is set to true. If so, that means that we haven't un-hidden, so we set that property to false (because we don't want to manually bother with hiding / un-hiding this div when Nintex will do it for us), and un-hide the div. You can add your own code for failure cases below this.

If it succeeds, then it submit as normal, but you now have a window to accomplish whatever you'd like to do in between. 

For whatever reason, if I make an event using something like NWF$("#aspnetForm").on('submit',function(){});, it will start to mess with the Cancel button (as it's also a form of submit). So there might be a better way of binding this to the submit button, but someone else can get into that if they'd like. 

I hope that this helps you all along your quest to build the best custom form you can! 

(EDIT: I searched the forums that found another instance of someone using the Page_ClientValidate() function, which can be found here  

It shows an example on how to create a modal dialog when the form is valid (and has been submitted), but may be of interest to people in this thread). 

View solution in original post

Reply
omar_taha
Nintex Newbie

Re: JavaScript to trigger form validation rules

Jump to solution

Hello ‌, I read your answer, it is easy, if it works, it will be very helpful.

Thanks

0 Kudos
Reply
Automation Master
Automation Master

Re: JavaScript to trigger form validation rules

Jump to solution

Yeah. I hope that someone else can try it and confirm that it's what they need. It seems to be a problem that several people have asked about in the past, and it would be nice to finally have some sort of workaround. 

0 Kudos
Reply
Automation Master
Automation Master

Re: JavaScript to trigger form validation rules

Jump to solution

Were you ever able to get this working?

Reply
Automation Master
Automation Master

Re: JavaScript to trigger form validation rules

Jump to solution

Hi nmarples‌,

Thanks to your post, I built this function to display validation errors when the user clicks on a javascript button :

function validateForm() {

            // Remove previous error css class on each control

            for(i = 0; i < Page_Validators.length ; i++) {

                        NWF$("#" + Page_Validators.controltovalidate).removeClass("nf-error-highlight").attr("title","");

            }

            // Validate form

            var formValidated = Page_ClientValidate();

            // If the form is not valid

            if(!formValidated) {

                        // For each control

                        for(i = 0; i < Page_Validators.length ; i++) {

                                    // If the control is not valid

                                    if(!Page_Validators.isvalid) {

                                                NWF$("#" + Page_Validators.controltovalidate).addClass("nf-error-highlight").attr("title",Page_Validators.errormessage);

                                    }

                        }

            }

}

I haven't tested with all types of control but for me it works with most of them.

Hope this helps

Reply
Automation Master
Automation Master

Re: JavaScript to trigger form validation rules

Jump to solution

That's awesome and very great for people who are looking to solve this problem. Thank you for taking it the extra mile! 


Reply
donald_mcnally
Nintex Newbie

Re: JavaScript to trigger form validation rules

Jump to solution

Hi, @cju. This is a really great solution!  I just added it to a form where I needed it and found a couple of lines that need small corrections.

 

Within each of the for loops, the Page_Validators reference needs to be Page_Validators[i] so that it looks at each element of the Page_Validators object.

 

I also notice that once this runs, my Cancel button (which is just a default Cancel button) goes to a blank screen rather than closing the form and returning to the view.  Anyone else seen that and have a solution?

0 Kudos
Reply