Custom Editor Window - Add required to dynamic field

Question

So following https://ej2.syncfusion.com/javascript/documentation/schedule/editor-template/?no-cache=1#apply-validations-on-editor-template-fields, I can't get it to work for a custom field that was added after the fact. Users can still submit the form without typing a preference. Please see the below truncated code.

<script id="EventEditorTemplate" type="text/x-template">
    <table class="custom-event-editor" width="100%" cellpadding="5">
        <tbody>
        <tr>
            <td class="e-textlabel">Preference</td>
            <td colspan="4" id="Location"></td>
        </tr>
        </tbody>
    </table>
</script>

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: '800px',
    views: ['Day', 'Week', 'Month'],
    eventSettings: {
        dataSource: dataManger,
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
    },
    allowDragAndDrop: false,
    allowResizing: false,
    editorTemplate: '#EventEditorTemplate',
    showQuickInfo: false,
    popupOpen: OnPopupOpen,
});
scheduleObj.appendTo('#Schedule');

function OnPopupOpen(args) {
    if (args.type === "Editor") {
        var formElement = args.element.querySelector('.e-schedule-form');
        var preferenceElement = args.element.querySelector('#Location');
        var preferenceInputEle = new ej.base.createElement('input', {
            className: 'e-field', attrs: {name: 'Location'}
        });
        preferenceElement.appendChild(preferenceInputEle);
        var preferencetextbox = new ej.inputs.TextBox({placeholder: 'Location Preference', floatLabelType: 'Never',});
        preferencetextbox.appendTo(preferenceInputEle);

        var validator = ((formElement).ej2_instances[0]);
        validator.addRules('Location', {required: true});
    }
}

Balasubramanian Sattanathan · Answer

Hi Mark, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported “Custom Editor Window - Add required to dynamic field” problem and checked with our end by preparing a sample using the below code snippet. Since the validation for the custom field is properly working. In the below sample, the user can’t submit the form without selecting the value for the status field. 
 




var statusElement = args.element.querySelector('#EventType'); 
if (!statusElement.classList.contains('e-dropdownlist')) { 
  var dropDownListObject = new ej.dropdowns.DropDownList({ 
    placeholder: 'Select a status', value: statusElement.value, 
    dataSource: ['New', 'Requested', 'Confirmed'], 
    select: valueChange 
  }); 
  dropDownListObject.appendTo(statusElement); 
} 
function valueChange() { 
  if (!ej.base.isNullOrUndefined(document.getElementById("EventType_Error"))) { 
    document.getElementById("EventType_Error").style.display = "none"; 
  } 
} 
var validator = ((formElement).ej2_instances[0]); 
validator.addRules('EventType', { required: true }); 
 
Sample: https://stackblitz.com/edit/ovebc4?file=index.js 
 
Kindly try the above sample and let us know if you need further assistance. 
 
Regards, Balasubramanian S

Mark · Answer

We are using that exact code and yet for some reason, it doesn't work. Is there a setting that we could have enabled that over rides that? Also, we are using a textbox and not a dropdown. Does that change anything?

I forked your provided stackblitz and as you can see, it does not work: https://stackblitz.com/edit/ovebc4-e1hk76?file=index.js

I even tried this which works, but doesn't display the error message.

function OnActionBegin(args) {
    if (args.requestType == 'eventCreate' || args.requestType == "eventChange") {
        var options = {
            rules: {
                'Location': {required: true},
                'EventType': {required: true}
            }
        };
        var formObject = new ej.inputs.FormValidator('#ScheduleEditForm', options);
        if (!formObject.validate()) {
            args.cancel = true;
        }
    }
}

Balasubramanian Sattanathan · Answer

Hi Mark, 
 
Thanks for the update. 
 
We have validated your requirement “we are using a textbox and not a dropdown” at our side and modified the sample based on that using below code snippet.  
 




fields: { 
  location: { 
    name: 'Location', validation: { 
      required: true 
    } 
  } 
} 
 
Sample: https://stackblitz.com/edit/ovebc4-oza2bg?file=index.js 

Kindly refer/follow the above sample and let us know if you need further assistance. 

Regards, Balasubramanian S

Mark · Answer

Capitalization was the key.  We had tried fields but were using "Location" instead of "location" for the field reference.  Thanks this is working now.

Vengatesh Maniraj · Answer

Hi Mark, 

Thanks the update. 

We are happy that your problem has resolved. 

Regards, 
Vengatesh