Validation for large group of radio buttons

Forms SharePoint 2019
1

Hi,

I have a large group of radio button questions within a tab container in a form, I want to ensure all have an answer on save at a specific stage. I can't simply make them mandatory fields because it's a large form filled in at different stages, so they are not mandatory at the first stage.

Therefore I have attached a validation function to one field and written some code to validate all radio button questions within the tab container if at the specific stage, instead of having to use a different validation function for each one:

fd.field('Section_x0020_B').validators.push({
  name: 'Technical radio buttons validation',
  error: 'Please select a response to all multi-value questions in Section B' ,
  validate: function(value) {
    if(fd.field('Stage').value == 'Technical Information/Confirmation') {

      $(".tab-content .fd-radio-group").each(function(){
        if($(this).find("input:radio:checked").length > 0) {
          // Response has a value 
          console.log("OK CONTINUE")
        }
        else {
          console.log("FALSE, STOP!!!")
          return false
        }                
      });                
                
    }
    return true
  }
});

I then have a custom save function, in which the first line is to log the fd.isValid value before using it in an if block to continue:

window.SaveForm = function() {
    console.log(fd.isValid);
    if(fd.isValid) {...

In the console I can see the first line logged on save of the form is "FALSE, STOP!!!" showing it has hit the return false statement in the validation function, however then the next line logged is true, showing that fd.isValid is returning true where it should return false? Why is this the case?

Thanks

2

Dear @Andrew,
Do you see the console.log("OK CONTINUE") line in the console or does it go straight to return true?

3

Hi @Nikita_Kurguzov,

I should have said in my test above all the radio button questions were left unanswered so I never expected to see "OK CONTINUE" logged. However, if I do answer the first question in the group then I do see "OK CONTINUE" logged before the "FALSE, STOP!!!" line:

Capture

So the validation function seems to be behaving as expected but the value returned from the fd.isValid not.

4

Dear @Andrew,
Any difference if you don't tie your validator to a specific field? Instead of:
fd.field('Section_x0020_B').validators.push({
use
fd.validators.push({

5

Hi @Nikita_Kurguzov ,

I figured it out, the return false was just breaking out of the $.each loop not returning a value to the fd.isValid property, the function then continued outside of the each loop to hit the final return true.

I updated the function as below to set a returnValue variable to pass to the final return statement if the validation failed:

fd.validators.push({
  name: 'Technical radio buttons validation',
  error: 'Please select a response to all multi-value questions in Section B' ,
  validate: function(value) {
    var returnValue = true;

    if(fd.field('Stage').value == 'Technical Information/Confirmation') {

      $(".tab-content .fd-radio-group").each(function(){
        if($(this).find("input:radio:checked").length == 0) {
          console.log("FALSE, STOP!!!");
          returnValue = false;
          return false;
        }                
      });                
                
    }
    return returnValue;
  }
});
1 Like