Mandatory Field

Scheduler Javascript
#1

Hi All,

i have below code,

i want to make the field mandatory by passing the var isReason as boolean true/false into the scheduler config; required: isReason as below, however is seem not working. Kindly refer to bold section … & please advise:-

               [b]    
                var isReason=false;
                var isAttach=false;
                var isRel=false;
                [/b]
                var select = scheduler.form_blocks.my_select;
                scheduler.form_blocks.my_select = {               
                  get_value : select.get_value,
                  set_value : function(node,value,ev){
                     mode = node.firstChild;
                     mode.value=value||"";
                     var selectEl = node.firstChild;
                     selectEl.onchange = function(e){                        
                            var index = selectEl.selectedIndex;
                            var val = selectEl.options[index].text;
                           
                            $.ajax({
                                type: "POST",
                                async: false,
                                url: "<%=Url.Content("~/Calendar/getVal/")%>",
                                data: { 'type': val, 'legalentity_id': <%=Model.aspnet_Memberships[0].legalentity_id%> },
                                dataType: "json",
                                error: function (request) {
                                    alert(request.responseText);
                                    event.preventDefault();
                                },
                                success: function (result1,result2,result3) {
                                   [b] 
                                   isReason=result1;
                                    isAttach=result2;
                                    isRel=result3;
                                    [/b]
                                    return false;
                                }                                                            
                            });    

                        }

                  },
                  render : select.render,
                  focus : select.focus
                }

                     
                //lightbox configuration
                scheduler.config.lightbox.sections = [
                    {name:"LMS_LeaveTypes",map_to:"leavetype_id",type:"my_select",options:LMS_LeaveTypes},
                    {name:"description",height:100,map_to:"reason", [b]required: isReason[/b], type:"textarea",focus:!0},
                    {name:"LMS_Relationships",map_to:"maternity",type:"select",[b]required: isRel[/b], options:LMS_Relationships},
                    {name:"LMS_Relationships1",map_to:"rel_id",type:"rel_select",[b]required: isRel[/b], options:LMS_Relation},
                    {name:"attachment",height:30,map_to:"attachSlip",required: isAttach, type:"file"},
                    {name:"time",height:72,type:"time",map_to:"auto"}             
                ];

Thank you.

Regards,
Micheale

#2

Hi All,

I manage to get the uI work. But when i leave the description field blank. It’s doesn’t show me the validation error. Straight away go to Save Controller function.

Please advise.

Thank you.

var isReason="false";
                var isAttach="false";
                var isRel="false";

                var select = scheduler.form_blocks.my_select;
                scheduler.form_blocks.my_select = {               
                  get_value : select.get_value,
                  set_value : function(node,value,ev){
                     mode = node.firstChild;
                     mode.value=value||"";
                     var selectEl = node.firstChild;
                     selectEl.onchange = function(e){                        
                            var index = selectEl.selectedIndex;
                            var val = selectEl.options[index].text;
                           
                            $.ajax({
                                type: "POST",
                                async: false,
                                url: "<%=Url.Content("~/Calendar/getVal/")%>",
                                data: { 'type': val, 'legalentity_id': <%=Model.aspnet_Memberships[0].legalentity_id%> },
                                dataType: "json",
                                error: function (request) {
                                    alert(request.responseText);
                                    event.preventDefault();
                                },
                                success: function (data) {
                                    $('#description').attr('required',data.isReason_Comp);
                                    $('#LMS_Relationships').attr('required',data.isRelationship_Comp);
                                    $('#LMS_Relationships1').attr('required',data.isRelationship_Comp);
                                    $('#attachment').attr('required',data.isAttach_Comp);
                                    return false;
                                }                                                            
                            });    

                            if(val.indexOf('Maternity') > -1)
                            {
                                    //Display Maternity Section
                                    var style = "block";
                                    var nodesA = document.all[32];
                                    nodesA.style.display=style; // editor area
                                    nodesA.previousSibling.style.display=style; //section header
                                    scheduler.setLightboxSize(); //correct size of lightbox

                                    //Hide Funeral Section
                                    var style = "none";
                                    var nodesA = document.all[39];
                                    nodesA.style.display=style; // editor area
                                    nodesA.previousSibling.style.display=style; //section header
                                    scheduler.setLightboxSize(); //correct size of lightbox
                                
                            }
                            else if(val.indexOf('Funeral') > -1)
                            {
                                //Display Funeral Section
                                var style = "block";
                                var nodesA = document.all[39];
                                nodesA.style.display=style; // editor area
                                nodesA.previousSibling.style.display=style; //section header
                                scheduler.setLightboxSize(); //correct size of lightbox

                                //Hide Maternity Section
                                var style = "none";
                                var nodesA = document.all[32];
                                nodesA.style.display=style; // editor area
                                nodesA.previousSibling.style.display=style; //section header
                                scheduler.setLightboxSize(); //correct size of lightbox
                               
                            }else{
                                //Hide Maternity Section
                                var style = "node";
                                var nodesA = document.all[32];
                                nodesA.style.display=style; // editor area
                                nodesA.previousSibling.style.display=style; //section header
                                scheduler.setLightboxSize(); //correct size of lightbox

                                //Hide Funeral Section
                                var style = "none";
                                var nodesA = document.all[39];
                                nodesA.style.display=style; // editor area
                                nodesA.previousSibling.style.display=style; //section header
                                scheduler.setLightboxSize(); //correct size of lightbox

                            }
                     }

                  },
                  render : select.render,
                  focus : select.focus
                }

                     
                //lightbox configuration
                scheduler.config.lightbox.sections = [
                    {name:"LMS_LeaveTypes",map_to:"leavetype_id",type:"my_select",options:LMS_LeaveTypes},
                    {name:"description",height:100,map_to:"reason", required: isReason, type:"textarea",focus:!0},
                    {name:"LMS_Relationships",map_to:"maternity",type:"select",required: isRel, options:LMS_Relationships},
                    {name:"LMS_Relationships1",map_to:"rel_id",type:"rel_select",required: isRel, options:LMS_Relation},
                    {name:"attachment",height:30,map_to:"attachSlip",required: isAttach, type:"file"},
                    {name:"time",height:72,type:"time",map_to:"auto"}             
                ];

Regards,
Micheale

#3

The code which you are using is set “required” attribute for form controls, but if you are using default lightbox, it will just read the data from the form, which will not trigger html5 validation ( it is triggered by submit action only )

In case of normal lightbox you can use onEventSave handler for validation.
docs.dhtmlx.com/doku.php?id=dhtm … neventsave