Could we make field mandatory depending on accordion opened?

Hello community !

I would like to know if it's possible to make mandatory field (in JS) depending on accordion open or not ?

So, I've 2 codes wich :

1 - depending on field selected (=choice value), i can open/close 3 accordions (accordion NEW/RENEWALL/ADDITION), code below :

////////////////////////////////////if type of purchase then (first cascading questions)
fd.spRendered(() => {
    
    
    fd.field('TypeOfPurchase').$on('change', () => {
        // put the code here instead of spRendered()

    //NEW
    //accordion3, children0 (=Panel 1)
    if (fd.field('TypeOfPurchase').value === 'New Purchase') {
        fd.container('Accordion3').$children[0].open = true;
        fd.container('Accordion3').$children[0].disabled = false;
        $(fd.container('Accordion3').$children[0].$el).show();
        
        
        //accordion3, children1 (=Panel 2)
        fd.container('Accordion3').$children[1].open = false;
        fd.container('Accordion3').$children[1].disabled = true;
        //$(fd.container('Accordion3').$children[1].$el).show();  
        
        //accordion3, children2 (=Panel 3)
        fd.container('Accordion3').$children[2].open = false;
        fd.container('Accordion3').$children[2].disabled = true;
        //$(fd.container('Accordion3').$children[2].$el).show();    
    }
    });
});

2 - Update values on sp field from common field (cause 3 accordions contains same questions), code below :

fd.spRendered(() => {
//RENEWALL
//PurchaseOver50KEUR
    fd.field('PurchaseOver50KEUR').$on('change', (value) => {
        fd.field('DoesThisPurchaseAmountToMoreThan50000PerYearRe').value = value;
    });
    fd.field('DoesThisPurchaseAmountToMoreThan50000PerYearRe').$on('change', (value) => {
        fd.field('PurchaseOver50KEUR').value = value;
    });
});

Is it possible to add something,"blocking" with a friendly message, inviting user to fill those fields, into one of my code ? I saw this code below on an other topic :

fd.spRendered(function() {

    function makeFieldsRequired() {
        if (fd.field('Feild1').value && fd.field('Feild2').value ) {
            fd.field('Field3').required = true;
        } else {
            // Set Due Date as not required if there is no Start Date
            fd.field('Field3').required = false;
        }
    }

    // Calling makeFieldsRequiredwhen field value changes
    fd.field('Feild1').$on('change',makeFieldsRequired);
    fd.field('Feild2').$on('change',makeFieldsRequired);

    // Calling makeFieldsRequiredon form loading
    makeFieldsRequired();

});

In advance, thanks for reading ! :slight_smile:

Hello @lolopixxx,

You can add a click event to the accordion header with JQuery and run the code when the header is clicked:

$('.accordion-header').on( "click", function() {
//check if the second panel is opened and if field has value
  if(fd.container('Accordion1').$children[1].open && !fd.field('Text6').value) {
      //if field is empty show alert
      alert('value is required');
      //open the first panel
      fd.container('Accordion1').$children[0].open = true;
     //close the second panel
      fd.container('Accordion1').$children[1].open = false;    
  }
} );

Hello @Margo :slight_smile:

Thanks for this quick answer, but I didn't understand :confused: (..noob...power).

So, I :
1 - copied/pasted the code and updated for me, after my last sp.rendered code :

$('.accordion-header').on( "click", function() {
//check if the second panel (RENEWAL) is opened and if field has value
  if(fd.container('Accordion3').$children[1].open && !fd.field('sof').value) {
      
      //if field is empty show alert
      alert('value sof is required');
      
      //close the first panel
      fd.container('Accordion3').$children[0].open = false;
     //open the second panel, renewal
      fd.container('Accordion3').$children[1].open = true;
     //close the 3rd panel
      fd.container('Accordion3').$children[2].open = false;
  }
} );

2 - test it
So, it didn't works, but of course, I should miss A BIG thing ? ^^'

@lolopixxx,

First, all code must be inside the spRendered function.

The next step depends on what you need. My code example keeps the first panel open if the field inside it is blank. This condition:

if (fd.container('Accordion1').$children[1].open && !fd.field('Text6').value) {

And showing the message for a user in the alert box:

            alert('value is required');

You can replace the alert with any other code, depending on your needs.

However, if you simply need users to fill in a field, make it required. This way, when a user submits the form, they will receive an error if the field is blank

Hello @Margo !

I think I understood. thanks!

I commented 'alert' and put field required.

So, here my code which is working :

////////////////////////////////////if type of purchase then (first cascading questions)
fd.spRendered(() => {
    
    
    fd.field('TypeOfPurchase').$on('change', () => {
        // put the code here instead of spRendered()

    //NEW
    //accordion3, children0 (=Panel 1)
    if (fd.field('TypeOfPurchase').value === 'New Purchase') {
        fd.container('Accordion3').$children[0].open = true;
        fd.container('Accordion3').$children[0].disabled = false;
        $(fd.container('Accordion3').$children[0].$el).show();
        
        
        //accordion3, children1 (=Panel 2)
        fd.container('Accordion3').$children[1].open = false;
        fd.container('Accordion3').$children[1].disabled = true;
        //$(fd.container('Accordion3').$children[1].$el).show();  
        
        //accordion3, children2 (=Panel 3)
        fd.container('Accordion3').$children[2].open = false;
        fd.container('Accordion3').$children[2].disabled = true;
        //$(fd.container('Accordion3').$children[2].$el).show();    
    }
    
    
 //////////////   
    //RENEWAL
    //accordion3, children0 (=Panel 1)
    if (fd.field('TypeOfPurchase').value === 'Renewal') {
        fd.container('Accordion3').$children[0].open = false;
        fd.container('Accordion3').$children[0].disabled = true;
        //$(fd.container('Accordion3').$children[0].$el).show();
        
        //accordion3, children1 (=Panel 2)
        fd.container('Accordion3').$children[1].open = true;
        fd.container('Accordion3').$children[1].disabled = false;
        $(fd.container('Accordion3').$children[1].$el).show();
        
        //accordion3, children2 (=Panel 3)
        fd.container('Accordion3').$children[2].open = false;
        fd.container('Accordion3').$children[2].disabled = true;
        //$(fd.container('Accordion3').$children[2].$el).show();    
    }
    


 ///////////////

    //ADDITION
    //accordion3, children0 (=Panel 1)
    if (fd.field('TypeOfPurchase').value === 'Additionnal purchase under existing contract') {
        fd.container('Accordion3').$children[0].open = false;
        fd.container('Accordion3').$children[0].disabled = true;
       //$(fd.container('Accordion3').$children[0].$el).show();
       
       //accordion3, children1 (=Panel 2)
       fd.container('Accordion3').$children[1].open = false;
       fd.container('Accordion3').$children[1].disabled = true;
       //$(fd.container('Accordion3').$children[1].$el).show();
       
       //accordion3, children2 (=Panel 3)
       fd.container('Accordion3').$children[2].open = true;
       fd.container('Accordion3').$children[2].disabled = false;
       $(fd.container('Accordion3').$children[2].$el).show();
    }
 
 ///////////////////////////////
 
      //check if the first panel (NEW) is opened and if field has value
  if(fd.container('Accordion3').$children[0].open && !fd.field('PurchaseOver50KEUR').value) {
      
      //if field is empty show alert
  //alert('ALL data about [LEGAL INVOLVEMENT, new] panel are required. Pls fill it out to continue.');
      

    fd.field('PurchaseOver50KEUR').required = true;
    fd.field('QuestelCommitmentOver5Years').required = true;
    fd.field('IPImpact').required = true;
    fd.field('PurchaseIncludeAnExclusivity').required = true;

  }
  
 
     //check if the second panel (RENEWAL) is opened and if field has value
  if(fd.container('Accordion3').$children[1].open && !fd.field('sof').value) {
      
      //if field is empty show alert
  //alert('ALL data about [LEGAL INVOLVEMENT, renewal] panel are required. Pls fill it out to continue.');
      
    fd.field('sof').required = true;
    fd.field('DoesThisPurchaseAmountToMoreThan50000PerYearRe').required = true;
    fd.field('DoesThisPurchaseCommitQuestelForMoreThan5YearsRe').required = true;
    fd.field('DoesThisPurchaseHaveOrCouldHaveAnIPImpactOnQuestelsIPRightsOrDoesItCoverADevelopmentOrCreationForWhichQuestelShallReserveIPRightsRe').required = true;
    fd.field('DoesThisPurchaseIncludeAnExclusivityRe').required = true;
    
  }
  

     //check if the third panel (ADDITION) is opened and if field has value
  if(fd.container('Accordion3').$children[2].open && !fd.field('_x0073_of2').value) {
      
      //if field is empty show alert
  //alert('ALL data about [LEGAL INVOLVEMENT, addition] panel are required. Pls fill it out to continue.');
    
    fd.field('_x0073_of2').required = true;
    fd.field('DoesThisPurchaseAmountToMoreThan50000PerYearAd').required = true;
    fd.field('DoesThisPurchaseCommitQuestelForMoreThan5YearsAd').required = true;
    fd.field('DoesThisPurchaseHaveOrCouldHaveAnIPImpactOnQuestelsIPRightsOrDoesItCoverADevelopmentOrCreationForWhichQuestelShallReserveIPRightsAd').required = true;
    fd.field('DoesThisPurchaseIncludeAnExclusivityAd').required = true;
    
    
  }

/////////////////////////////////////////////////
   
    });
});

////////////////////////////////////if type of purchase then (first cascading questions)

I'm asking how could I put the alert on the 'submit' button ? so, I would click on "submit" then if the accordion opened contains empty field then alert the user to fill the required field.

I already have this code into the submit button :

So, I guess thing like this, in the main idea, it will be:

  • if(fd.container('Accordion3').$children[0].open && !fd.field('PurchaseOver50KEUR').value) {
  • or
  • if(fd.container('Accordion3').$children[1].open && !fd.field('sof').value) {
  • or
  • if(fd.container('Accordion3').$children[2].open && !fd.field('_x0073_of2').value) {

THEN

alert('ALL data about [**** INVOLVEMENT] panel are required. Pls fill it out to continue.');

exit submission (so not save anything and return the form)

  • if container .... blbaba.. is not empty

THEN
fd.field('pr....)
return fd.save();

What do you think ? is it fasable ?

thanks a lot, in advance to help me here.