Cancel Submit Without Closing Form

RhinoLex

Hi,

We have a relatively long form that has some validation in the preSubmit event. If any of the validation fails it returns false to prevent the submit action, however this closes the form so if the user has only missed 1 mandatory field, they have to enter all the information in again. Is there a way to prevent the submit action without closing the form?

Also, I've just noticed that it's not actually cancelling the submit event. The Ajax call is still being made. I've clearly not understood how to implement this properly.

Applicable code snippets:

Editor declaration

editor = new $.fn.dataTable.Editor({
  ajax: '/RIT/DATA/JSP/ajaxInsertHSData.jsp',
  table: '#' + tableId,
  fields: [
    {name: 'hstype', def: 'CDI', type: 'hidden'},
    {name: 'reportingperiod', def: $('#disReportingPeriod').attr('data-date'), type: 'hidden'},
    {name: 'hsExisting', def: false, type: 'hidden'},
        {label: "RPTID:", name: "rptid", def:$("#selectRPTID").prop('value'), type: 'readonly'},
        {label:'PC Date:', name:'fieldPCDate', type: 'date'},
        {label:'Main Contractor:', name:'fieldTC', type: 'select',},
        {label:'Project Name:', name:'fieldSelectBranch', type: 'select', fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Trades/Subcontractors</div>'},
        {label:'Man Days On Site:', name:'tsManDay', def: '0',},
        {label: 'Overall Hours:', name:'tsHours', def: '0',fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Agency/Self Employed</div>'},
        {label:'Man Days On Site:', def: '0', name:'aseManDay'},
        {label: 'Overall Hours:', def: '0', name:'aseHours',fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Total Employees</div>'},
        {label:'Man Days On Site:', def: '0', name:'teManDay'},
        {label: 'Overall Hours:', def: '0', name:'teHours',fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Incidents/Accidents</div>'},
        {label:'Overall Persons On Site:', def: '0', name:'opos', type:'readonly'},
        {label:'Overall Hours:', name:'oph', def: '0', type:'readonly'},
        {label:'N<sup>o</sup> of All Incidents:', def: '0', name:'allincidents'},
        {label:'N<sup>o</sup> of Reportable Accidents (RIDDOR):', def: '0', name:'reportableaccidents'},
        {label:'<div style="white-space:nowrap; margin-left:-45px;">N<sup>o</sup> of Reportable Occupational<br>Diseases & Exposures (RIDDOR):</div>', def: '0', name:'reportablediseases'},
        {label:'<div style="white-space:nowrap; margin-left:-15px;">N<sup>o</sup> of Reportable Dangerous<br>Occurances (RIDDOR):</div>', def: '0', name:'dangerousoccurances'},
        {label:'N<sup>o</sup> of Near Misses:', def: '0', name:'nearmisses', fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Inspections</div>'},
        {label:'N<sup>o</sup> of HSE Visits:', def: '0', name:'hsevisits'},
        {label:'N<sup>o</sup> of Internal Visits:', def: '0', name:'internalvisits'},
        {label:'N<sup>o</sup> of External<br>/Client Inspections:', def: '0', name:'externalinspections'},
        {label:'Joint Inspections<br>Across the TCA:', def: '0', name:'jointinspections', fieldInfo:'<br><div style="font-weight:bold; font-size:18px; text-align:center;color:#008312;">Travel & Carbon</div><div style="text-align:center;">CO<sub>2</sub> Calculated in Report</div>'},
        {label:'Car Miles:', def: '0', name:'carmiles'},
        {label:'Van Miles:', def: '0', name:'vanmiles'},
        {label:'Train Miles:', def: '0', name:'trainmiles'},
        {label:'Bus Miles:', def: '0', name:'busmiles'},
        {label:'Air Miles:', def: '0', name:'airmiles'}
    ]
});

preSubmit

editor.on('preSubmit', function(e, data, action){
    $.each(data.data, function(key, values){
        if($('#DTE_Field_fieldPCDate').val().length == 0){
            bPCDate = false;
        }
        if($('#DTE_Field_fieldTC').val().indexOf('Select') != -1){
            bTC = false;
        }
        if($('#DTE_Field_fieldSelectBranch').val().indexOf('Select') != -1){
            bBranch = false;
        }
        if(!bPCDate || !bTC || !bBranch){
            var msg = 'The following mandatory fields were not completed:<br>';
            if(!pcDate){
                msg = msg + 'PC Date<br>';
            }
            if(!bTC){
                msg = msg + 'Main Contractor<br>';  
            }
            if(!bBranch){
                msg = msg + 'Project Name<br>';
            }
            msg = msg + 'Please complete all mandatory fields before clicking <i>Create</i>';
            hsWarningDialog('WARN', 'Incomplete Info', msg);
        return false;
        } else {
        values.fieldTC = $('#DTE_Field_fieldTC').val();
        values.fieldSelectBranch = $('#DTE_Field_fieldSelectBranch').val();
    }
    });
});

colin

preSubmit should be able to cancel the submission while keeping the form open - see example here. It suggests your logic may be wrong in your function.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

RhinoLex

Hi Colin,

I'm relatively sure the logic is ok as the hsWarningDialog function is triggered.

I'm happy to give you access to the page but it's behind a login so I'd need to give you credentials. What's the best way to send those to you?

colin

Probably the easiest thing to do would be to look at the example I posted above and see if that helps, and if not, modify that to demonstrate the issue you're having. That way the code is simple and the problem cut-down to the basics.

Colin