Public Form DataTable enforce blank field check on required column entry

Just noticed an issue for us that I'm unsure how to rectify.

On our public form we have a DataTable, stQualifications with five columns.

If you "Add new record" the first three columns will flag as a required field if you click in them and won't allow you to move on.

image

If you omit a required field by not selecting it you can still submit the form but the required field will just have the data entry as "undefined"

How do we ensure that the first 3 required columns are populated with a selection or manual entry and not left blank as in the example above? If this was submitted we'd end up with the "Applied Science" data row value for "Qualification" as undefined in the formatted table of our SharePoint List.

And, ensure at least one or more rows are completed because at the moment an empty DataTable will allow form submissions successfully.

Regards

Mark

Okay got the validation for at least one record to be added with the following code.

// Validate at least one record on DataTable
fd.control('stQualifications').addValidator({
    error: 'Error message',
    validate: function(value) {
        if (value.length == 0) {
            this.error = "Add at least one record to the Student Qualification table by clicking the 'Add new record' button above.";
            return false;
        }
        return true;
    }
});

Just need the correct validation code to ensure that the first 3 required DataTable column fields can't be blank.

Mark

Hello @mloveridge,

Yes, currently you can make sure that the Data Table contains records by using custom validation only.

You can use the code below to make sure that all required columns are not blank:

fd.control('DataTable1').addValidator({
    name: 'DataTable validator',
    error: "Fill out all required columns",
    validate: function(value){
  for(var i = 0; i < value.length; i++){
    if(!value[i].Column1 || !value[i].Column2){
      return false;
    }
  }
  return true;
}})

@mnikitina

I assume we are missing a ; of the closing string }})

I did try that code but I don't see it working the way I was expecting.

If I leave the DataTable empty then the first validator throws up an error as you'd expect.

If I add a record and don't add any data to the column rows then the validator you suggest returns the error, so far so good.

However, if I fill the first three column rows which are required on the DataTable and leave the last two blank which are optional then the error is still shown. This would suggest that it doesn't matter what status the column has been set to in the designer. Even if I fill all the rows in I still get the error being displayed on the current form.

I had tried prepopulating the last two columns with a value such as a hyphen (-) as they are potentially an optional selection and the code above but I couldn't get the results to work for me.

//select the Data Table control to automatically prepopulate new rows
var dt = fd.control('stQualifications');
var isNew = false;

dt.widget.wrapper.find('.k-grid-add').on('click', e => {
    isNew = true;
});

dt.widget.bind('edit', function(e) {
    if (isNew) {
        isNew = false;
        //set values for Column4 and Column5
        e.model.set('Current Year 11 Grade', '-');
        e.model.set('Actual Grade', '-');
    }
});

Reference: Work with Data Table using JS on Plumsail Forms for SharePoint — SharePoint forms

Regards

Mark

Okay I have gone back to a single DataTable to try and get this to work, after reading many community threads and documents. It would appear this was reported as a bug back in 2019 and I believe it still exists!?

DataTable on a public form:

Clicking submit with no rows added with validation check results are correct

Making the first three columns required and prepopulating the last two column rows with a hyphen means that each time a record is added the first columns is always in focus and the required error displays when clicking any other row field.

However you can still skip column 2 and 3 even though they are mark required in the designer, if you do not click in the respective row you can submit the form successfully.

If we then add the code to validate all fields

fd.control('DataTable2').addValidator({
    name: 'DataTable validator',
    error: "Fill out all required column fields.",
    validate: function(value){
  for(var i = 0; i < value.length; i++){
    if(!value[i].Column1 || !value[i].Column2){
      return false;
    }
  }
  return true;
}})

It will show the error, but even though all the row fields are populated it will not submit the form.

Submission with all fields populate which includes the prepopulated hyphens in column 4 and 5

Even making sure the last two columns are selected by the user, the results are the same.

Using an in private browser and ensuring one row is completed by selecting a drop-down value for each column row field gives the same result.

Regards

Mark

fd.rendered(function() {

    //select the Data Table control to automatically prepopulate new rows
    var dt = fd.control('DataTable2');
    var isNew = false;

    dt.widget.wrapper.find('.k-grid-add').on('click', e => {
        isNew = true;
    });

    dt.widget.bind('edit', function(e) {
        if (isNew) {
            isNew = false;
            //set values for Column4 and Column5
            e.model.set('CurrentYear11Grade', '-');
            e.model.set('ActualGrade', '-');
        }
    });
    
    // Validate at least one record on a Data Table
    fd.control('DataTable2').addValidator({
        name: 'DataTable1 validator',
        error: 'Error message',
        validate: function(value) {
            if (value.length == 0) {
                this.error = "Add at least one record to the Student Qualification table by clicking the '+ Add new record' button.";
                return false;
            }
            return true;
        }
    });

    fd.control('DataTable2').addValidator({
        name: 'DataTable validator',
        error: "Fill out all required column fields.",
        validate: function(value){
      for(var i = 0; i < value.length; i++){
        if(!value[i].Column1 || !value[i].Column2){
          return false;
        }
      }
      return true;
    }})

});

@mnikitina

Apologies, just realised that the code needed the column titles changing and I believe this is working correctly now.

if(!value[i].Column1 || !value[i].Column2

Changed to

if(!value[i].Subject || !value[i].Qualification || !value[i].TargetGrade

The amended code used in full.

fd.rendered(function() {

    // Validate at least one record on a DataTable
    fd.control('DataTable2').addValidator({
        name: 'DataTable1 validator',
        error: 'Error message',
        validate: function(value) {
            if (value.length == 0) {
                this.error = "Add at least one record to the Student Qualification table by clicking the '+ Add new record' button.";
                return false;
            }
            return true;
        }
    });

    // Select the DataTable control to automatically prepopulate new column rows
    var dt = fd.control('DataTable2');
    var isNew = false;

    dt.widget.wrapper.find('.k-grid-add').on('click', e => {
        isNew = true;
    });

    dt.widget.bind('edit', function(e) {
        if (isNew) {
            isNew = false;
            //set values for Column4 and Column5
            e.model.set('CurrentYear11Grade', '-');
            e.model.set('ActualGrade', '-');
        }
    });
    
    // Validate required column fields are not empty
    fd.control('DataTable2').addValidator({
        name: 'DataTable validator',
        error: "Fill out the required column fields, on each row recorded these are Subject, Qualification and Target Grade.",
        validate: function(value){
      for(var i = 0; i < value.length; i++){
        if(!value[i].Subject || !value[i].Qualification || !value[i].TargetGrade){
          return false;
        }
      }
      return true;
    }});
    
});

Regards

Mark

2 Likes