Manually validate forms

Using the open sourced project, how would I manually validate the forms prior to submission.

Im not using the submit button provided by the form, instead, im trying to doing a manual submission instead but am unable to trigger the form validation where errors show up like it would here https://files.catbox.moe/wm3q2z.png

I came across the code _form.checkValidity(_form.submission.data); found here but that always return true.

Ive also tried to set the form element to form (<form id='trespassersForm'></form>) and call _$trespassersForm.validate(); but that also always return true.

i also came across this post but i have no need for server validation since the data will be saved in the formio mongodb.

The idea behind this is that i want to keep the form in a modal window to stay consistent with an already existing website. The modal window has its own save button which triggers the formio.canSubmit() line of code.

Heres what the modal looks like (rather use save button than submit button)

// modal window

        var formio = new Formio(formUrl);
       _$trespassersForm = $('#trespassersForm'); // document.getElementById('trespassersForm');

       // Formio.icons = 'fontawesome';

       Formio.createForm(_$trespassersForm[0], formUrl).then(function(form) {

        // Pre-populate values if in edit
        if (model.isEditMode) {
         new Formio(submissionUrl).loadSubmission().then(function(results) {
          form.submission = {
           data: results.data
          };
         });
        }

        // Register for the submit event to get the completed submission.
        form.on('submit', function(submission) {
         console.log('Submission was made!', submission);
        });

        // Everytime the form changes, this will fire.
        form.on('change', function(changed) {
         submissionData = changed;
        });

       });
       .....

this is called when the save button on the modal is pressed need to validate here where validation messages show up in the form as if i pressed the button

       formio.canSubmit().then(function(canSubmit) {
        if (canSubmit) {

         _modalManager.setBusy(true);

         try {
          var data = app.forms.submission.setAuditingValues(submissionData, model);
          formio.saveSubmission(data).then(function(didSubmit) {
           console.log('Did submit', didSubmit);
           abp.notify.info(app.localize('SavedSuccessfully'));
           _modalManager.close();
           abp.event.trigger('app.createOrEditTrespassersModalSaved');
          }).catch(e => {
           console.log(e);
           abp.notify.error(e);
          });
         } catch (err) {
          console.error(err);
         } finally {
          _modalManager.setBusy(false);
         }
        }
       });

[152hq]

alternatively, you can also use

form.submit(); // form is the form-instance that you have after form is rendered.

[hisuwh]

Thanks @randallknutson yes its very similar. I couldn’t find that method and ended up going a different way. But for other peoples benefit:

<template>
    <Form :ref="formioForm" />
</template>
<script>
export default {
    name: "MyComponent",
    methods: {
        validate() {
            this.$refs.formioForm.formio.checkValidity();
        }
    }
}
</script>