Validation on Multi-Panel Form with Next Buttons

Hi Kevin,

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

Thanks,

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.

See here for an example:  

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,

@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');

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

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:

My 'Next button

Thanks

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.

 - 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?

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.

@Nirmala Yeruva

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

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 ?