Validation on Multi-Panel Form with Next Buttons


Badge +8

Hello,

 

I have a Multi-Panel Form that walks users through multiple steps of a process. On the panels there are fields and places that have validation. When end users click the Next Button validation is happening on the fields that need to be validated automatically and the button moves the user to the next step.  How can I make it that when the user clicks the next button, if there are errors on that panel due to validation it wont continue forward?

 

As of right now the user clicks the Next Button and the from goes to the next page and shows validation errors that the user needs to fix, but the user must go back to the previous page to do those corrects I want to stop it so that user doesn't have to go back if there are issues in the validation.

 

All this is being done with Nintex 2013 in SharePoint 2013.

 

Any insight or work around with this is greatly apprenticed.


12 replies

Badge +3

Hi Kevin,

Have you come across any solution or workaround for the above issue.

Thanks,

Userlevel 5
Badge +12

I think your best bet at pulling this off would be to use some JS/custom validation.   This would give you a lot of flexibility in how and when a tab becomes disabled.

Userlevel 5
Badge +12

See here for an example:  

Badge +3

Hi Mike,

I have lot of validations on my form spread across 3 panels and it is looking quite bulky with all the custom validations and as I have more forms with similar requirement I am looking if there is a solution.

Another issue i have come acroos in using the JS custom validations i couldn't highlight the controls with validation errors.

The below css isn't doing anything.

control.css('border-color' : 'red');

or

control.css({'border-color' : 'red'});

Note: Control here is the name of the control

Thanks,

Badge +3

@Mike as i couldn't get the css working i have made a Panel with textbox and displaying all the validation errors, but would like to see the controls highlighted which have failed the validations.

Have tried the below as well.

control.css('border-color' , 'red');

Userlevel 5
Badge +12

Can you show me your validation function (or at least one of them)?

Badge +3

My 'Next' button is a javascript one and I am performing all the control validations on button click.

function CheckValidations(PassTheStepNumber)

{

   var myValidationMessage ="";

   var myEmployeeName = NWF$('#' +JSEmployeeName).val(); //This is the Javascript ClientID of EmployeeName control
   var EmployeeNameCSS = NWF$('#' +JSEmployeeName);      
   var validationTextBoxValue = NWF$('#' +JSValidationTextBox).val();
   NWF$('#' +JSValidationTextBox).val(myValidationMessage);
   if (NWF$.trim(myEmployeeName) == "")
   {          
          EmployeeNameCSS.css({'border-style':'solid'});
          EmployeeNameCSS.css({'border-color':'#ff0000'});
          myValidationMessage = myValidationMessage + ' Employee Name must be entered.';
     }

     if (NWF$.trim(myValidationMessage) != "") {

    NWF$('#' +JSValidationTextBox).val(myValidationMessage);

    ShowValidationPanel();  //This is another function to show the validationPanel which has the textbox.

}

The above JScode is only for one control and I have lots of controls on the form which needs to be validated on each Panel (a total of 3)

EmployeeName Control:

199765_pastedImage_1.png

My 'Next button

199775_pastedImage_3.png

Thanks

Badge +3

I got it working. The issue I think according to what I got was the css needs to be appplied against the JS Client ID directly. As I was capturing this in a variable, for some reason, the CSS didn't apply. Thanks for your suggestion to use the custom JS validations.

Userlevel 5
Badge +12

 - hello, I know its been a while since you posted this question.  My answer has helped Nirmala who had a similar requirement.   Would you mind if I marked my answer as correct, or do you need further assistance on this topic?

Badge +8

No, go ahead and mark your answer as correct i have no issues with that.  I'm glad that this topic of discussion has help another.

Badge +4

@Nirmala Yeruva

Thank you.  I was able to setup tab validation using your JS/CSS method.

Badge +3

Hi,

I have a form with 5 panels and several controls. I made the validations of these controls by form rules.

I would like to implement the next button, but I could not understand what the solution was. Can you give more details ?

Reply