evt.submitPrevented breaks form submission


#1

Hi everyone,

i’m currently trying to validate an embedded form using pure javascript since my form relies on some javascript libraries (sortable JS). In order to do so, i have some if statements in my camForm.on(‘submit’) function, if all requirements are fulfilled, the form is submitted, otherwise the submission is prevented using evt.submitPrevented = true;
This works as expected: If there are no errors in the form it is submitted and the form data is send to the server. If there is an error, the submission is prevented. However, if i trigger submitPrevented, insert valid values in my field and submit the form again, no data is send to the server. There are no error messages, the form is submitted and there is no visible clue in Tasklist that something went wrong, however the payload of the submit-form request is empty, as shown in the following screenshot:

Empty payload after evt.submitPrevented was set to true at some point in the past:

The code i’m using:

        camForm.on('submit', function(evt) {
            console.log(evt);
            if($("#applicant-list").attr("data-current-length") == $("#applicant-list").attr("data-length")){
                evt.submitPrevented = false;
                // CANDIDATE WAS SORTED IN; SO WE CAN SUBMIT
                // GET THE CURRENT ORDER OF APPLICANTS
                var order = [];
                $('#applicant-list .applicant-list-item').each(function(){
                    var $this = $(this);
                    order.push($this.data('id'));
                });

                $scope.listOfApplicants.applicantRanking = order;

                // STORE THE CURRENT ORDER FOR EACH APPLICANT
                order.forEach(function (value, index) {
                    $scope.listOfApplicants.applicantList.forEach(function (applicant, ai){
                        if(applicant.id == value){
                            applicant.wbigInternalRank = index+1;
                            console.log("[" + applicant.id + "] & [" + value + "] = " + applicant.wbigInternalRank);
                        }
                    })
                });

                // STORE THE RATING AND DESCRIPTION SO ITS AVAILABLE TO ALL INSTANCES
                $scope.listOfApplicants.applicantList.forEach(function (applicant, ai){
                    if(applicant.id == $scope.currentApplicant.id) {
                        applicant.wbigRating = $scope.currentApplicant.wbigRating;
                        applicant.wbigInterviewDescription = $scope.currentApplicant.wbigInterviewDescription;
                        console.log("Done setting variables");
                    }
                });
            } else {
                // DO NOT SUBMIT IF CANDIDATE WASNT SORTED IN
                $scope.showListHint = true;
                evt.submitPrevented = true;
            }
        });

        camForm.on('submit-success', function() {
          console.log("SUCCESS");
        });

        camForm.on('submit-error', function(evt, res) {
          var error = res[0];
          console.log("Error: " + error);
        });

I’ve been stuck on this problem for hours and i’m pretty desperate by now :cold_sweat:.
Hopefully some of you guys can help me.

Thank you!


#2

Hi @johannes.k
I could imagine that the submitPrevented is set too late.
Could you register an event listener to the event “submit-failed” and see if this is triggered?

Check the tasklist source code here:


Do you see the potential issue?

Best
Felix


#3

Hi @felix-mueller, thanks for your fast reply :slight_smile:

Can you give me a hint which element the event listener should be attached to? The form element doesn’t work for me.

However, i’m not sure if the event listener would help me track down my problem, since the form submission is prevented, so this issn’t an issue for me.
I’ll try to rephrase my problem: If the form submission is prevented and the user fixes his input so that the form is valid and submits the form again, the submission seems to work (there are no errors) but the payload of the “submit-form” request is empty and no data is transferred to the server.
However, if the user enters valid data the first time (so submitPrevented is never set to true), everything works as expected and data is transferred to the server.

I really appreciate your help, thank you so much!

Best
Johannes


#4

I understand, so this is probably not the issue.
Could you maybe try to set a break point in the method CamundaForm.prototype.submit
in your Chrome Developer Tools. This way you will quickly find out what is going on.

Otherwise I would have to try to reproduce it on my side.

Best
Felix