I have hidden columns based on values in one column but the form is not being saved as it gives "cannot leave blank" error

Question

I have a choice column which has 4 values in the drop-down list and based on each value I am hiding other columns.

Out of these hidden columns some columns are mandatory, and I am not able to save the form as it gives Cannot leave blank for those columns.

But since these are hidden ideally it should not pop up.

Can any one please help me out?

Answer 1

Don't make the columns as required in the list settings. Use custom JavaScript to check the selected drop-down value.

Based on the selected value you can make other columns as required or show it on the list form. Else remove the required condition and hide those columns.

By this, it will not show the error popup and form will be saved.

Hide/Show columns in Custom List based on dropdown selection

To mark the field as required:

Consider Column name as Column1 having ID Column1ID. Use following script to make it as a required field.

var column1 = document.querySelector("div[id^='Column1ID][id$='$TextField_inplacerte']";
var column1TR = column1.parentElement.parentElement.parentElement.parentElement ;
var column1Label = column1TR.querySelector("nobr") ;

// Add Required Asterisk to the Label
var starElement = document.createElement("span") ;
starElement. title = "This is a required field." ;
starElement.textContent = " * " ;
starElement.className = "ms-accenText" ;

column1Label.appendChild(starElement) ;

Answer 2

If the fields are required (in list settings) then you have to pass some value to those fields. you cannot leave them blank even if those are hidden fields.

So, do not make the fields required from list settings.

If you need some fields to be required only if the specific choice is selected from dropdown then you have to customize the list forms using JavaScript/JQuery.

For Example:

Consider, you have a choice field with its display name as Information Type and one date field (named Review Date).

And you want to make Review Date as required field only if the "Client Lost" or "Client Retained" option is selected from Information Type dropdown.

Then you can use PreSaveAction() like below:

function PreSaveAction() {
    var returnValue = true;
    returnValue = returnValue && ValidateReviewDate();
    return returnValue;
}

function ValidateReviewDate() {
    var ddlInformationType = $("select[title^='Information Type']")[0];
    var txtReviewDate = $(":input[title^='Review Date']")[0];

    if(ddlInformationType[ddlInformationType.selectedIndex].value=="Client Lost" || ddlInformationType[ddlInformationType.selectedIndex].value=="Client Retained" ) {
        if(txtReviewDate.value.length == 0) {
            alert("Please enter Review Date");
            txtReviewDate.focus();
            return false;
        }
        else {
            return true;
        }
    }
    else {
        return true;
    }
}

Note: Make sure you have added reference to JQuery file before using above code as it using JQuery ($) selectors to access the fields on form.