I have a simple contact form using Nuxt, and also Vuelidate for some validation on the form. My netlify form is not submitting correctly when i have the validation active and @submit.prevent=“submitForm()” on the form. The submitForm() method triggers the validation when the user clicks the submit button. Is there a way to incorporate the validation with the netlify form?
<div id="contact" class="contact-form">
<div class="row row--form">
<div class="col-form">
<transition name="fade" mode="out-in">
<div
v-if="show_contact == true"
key="1"
class="form-content shadow"
>
<div id="sayHello" class="title-block title-block--contact">
<p class="hello">👋</p>
<h1
id="sayHelloScrollTo"
class="title title--section title--underline"
>
Say Hello
<span class="underline"></span>
</h1 </div>
<form
name="contactForm"
method="post"
data-netlify="true"
netlify-honeypot="bot-field"
@submit.prevent="submitForm()"
>
<input type="hidden" name="form-name" value="contactForm" />
<div class="form-group">
<!--user name -->
<div class="floating-label">
<input
v-model="contact_name"
class="floating-input"
name="name"
type="text"
placeholder=" "
:class="{
'child-has-error': $v.contact_name.$error,
}"
/>
<label>Enter Your Name</label>
<p v-if="$v.contact_name.$dirty">
<span
v-if="!$v.contact_name.required"
class="form__alert"
>
Name is required
</span>
</p>
</div>
<!-- end user name -->
<!--user email -->
<div class="floating-label">
<input
v-model="contact_email"
class="floating-input"
type="text"
name="email"
placeholder=" "
:class="{
'child-has-error': $v.contact_email.$error,
}"
/>
<label>Enter Your Email</label>
<p v-if="$v.contact_email.$dirty">
<span
v-if="!$v.contact_email.required"
class="form__alert"
>
Email is required
</span>
<span v-if="!$v.contact_email.email" class="form__alert">
Please enter a valid email
</span>
</p>
</div>
<!-- end user email -->
<!--user message -->
<div class="floating-label">
<textarea
v-model="contact_message"
class="form-control form-control--textarea"
rows="5"
name="message"
placeholder="Enter Your Message"
:class="{ 'child-has-error': $v.contact_message.$error }"
/>
<p v-if="$v.contact_message.$dirty">
<span
v-if="!$v.contact_message.required"
class="form__alert"
>
Enter Your Message
</span>
<span
v-if="!$v.contact_message.minLength"
class="form__alert"
>
Message must be over 10 characters :)
</span>
</p>
</div>
<!-- end user message -->
</div>
<button type="submit" class="btn btn-primary">
Send Message
<font-awesome-icon far icon="arrow-right" />
</button>
</form>
</div>
<div
v-else
key="2"
class="form-content form-content--success shadow"
>
<img
src="../assets/img/mail-sent.svg"
class="img-responsive img-message-success"
/>
<h1 class="title title--section title-block--contact">
Success!
<span class="underline"></span>
</h1>
<p>Thank you for contacting me! I will be in touch shortly :)</p>
</div>
</transition>
</div>
</div>
</div>
export default {
data() {
return {
title: ' Contact Form',
show_contact: true,
contact_name: '',
contact_email: '',
contact_message: '',
}
},
validations: {
contact_name: {
required,
},
contact_email: {
required,
email,
},
contact_message: {
required,
minLength: minLength(10),
},
},
methods: {
submitForm() {
this.$v.$touch()
if (this.$v.$invalid) {
return true
} else {
this.show_contact = false
}
},
},
}