0
votes

I have a xpage that loads a Bootstrap modal window (see picture). I need to validate the data only the user pushes the 'Add New' button. I do not want the validators to run when 'Save and Continue' or 'Previous' buttons are pressed.

The modal dialog is a custom control used many times throughout the application. I cannot change the buttons to disable validators because most of the time I want to validate. The center content is stored in its own custom control.

My question is can I add code to the button to get a handle to each control, and set the disableValidators to true. I haven't been able to figure out how to do this. I have already tried computing the disableValidators but was totally unsuccessful. The fields are all bound to scoped variables.

I know that I can use clientside validation here, but the rest of the application uses server-side and I want to be consistent + this is a responsive app, and clientside on mobile is annoying.

enter image description here

1
Have you tried simply setting the disableValidators property to true on the button event?Per Henrik Lausten
I can't do that because the CC that holds the modal controls like 10 different windows, and changing that setting would fix this window and break the others. You did give me an idea, I guess I could clone the CC and make special case for this window. That is harder for the next programmer, but something to consider.Steve Zavocki

1 Answers

3
votes

Rather than adding code to button to and setting disableValidators for each control I would suggest the other way round. For each control set the required property only if user pushes 'Add New' button.

This blog post by Tommy Valand describes it in detail. The below function lets you test if a specific component triggered an update.

// Used to check which if a component triggered an update
function submittedBy( componentId ){
 try {
  var eventHandlerClientId = param.get( '$$xspsubmitid' );
  var eventHandlerId = @RightBack( eventHandlerClientId, ':' );
  var eventHandler = getComponent( eventHandlerId );  
  if( !eventHandler ){ return false; }

  var parentComponent = eventHandler.getParent();
  if( !parentComponent ){ return false; }

  return ( parentComponent.getId() === componentId );  
 } catch( e ){ /*Debug.logException( e );*/ }
}

So if you want the validation to run only when the user clicks a specific 'Add New' button then write this in all the required-attributes:

return submittedBy('id-of-add-new-button')