Я пытаюсь добавить форму контакта с простой проверкой на веб-сайт, созданный с помощью Vue.js, используя пример Vuetify.js. Я новичок, поэтому я не уверен, как это должно быть реализовано в компоненте Vue.
Я хочу добиться простой проверки формы на стороне клиента и заставить ее работать с формой https://getform.org/.
ОБНОВЛЕНО:
Код | Contact.vue
(взято из Vuetify.js формы, например)
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="Name"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="Email"
></v-text-field>
<v-btn
@click="submit"
:disabled="!valid"
>submit</v-btn>
</v-form>
<form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>
скрипт
<script>
export default {
name: 'contact',
data () {
return {
snackbar: true,
valid: false,
name: '',
nameRules: [
(v) => !!v || 'Name is required',
(v) => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
}
},
methods: {
submit() {
nativeForm.submit()
}
}
}
</script>