In my current project using Framework7 Vue with version 4.4.3, I am facing a challenge in validating a form upon submission. I came across this helpful code snippet:
$$('.save').on('click', function(e){
e.preventDefault();
if (!$$('#form-name')[0].checkValidity()) {
console.log('Check Validity!');
} else {
//ajax request here
return false;
}
});
But translating this logic to work in vue has proven to be a bit tricky for me. When logging out the form object, I couldn't find a checkValidity option...
I have managed to retrieve the form data using
const formData = this.$f7.form.convertToData('#ajaxForm')
The form inputs are defined within Framework7's components:
<f7-list >
<f7-list-input v-for="field in form"
:name="field.name"
:value="field.value"
@input="field.value = $event.target.value"
:label="field.label"
:type="field.type"
:placeholder="field.placeholder"
:info="field.info"
:required="field.required"
:validate="field.validate"
clear-button
>
</f7-list-input>
</f7-list>
Although validation is possible through props, triggering it on submit remains unclear. It seems like accessing Framework7's DOM as shown in the example is necessary. I attempted to access Dom7 but found it to be undefined, probably because of Vue being used?