Do not want to submit form until email and phone are validated - Vue.js 3 - regex

Question

I have a form that I am validating - all fields are required. Everything seems to be working except my form submits even when an incorrect phone and email are entered (according to my regex Watch validation). What do I seem to be missing to make sure that the default refresh is prevented if the email and phone are entered incorrectly?
First section is my html form, the second is my Vue.js 3 app code.
<form name="mainForm" #submit="submitForm" method="post">
<div class="row mb-3 gx-2">
<div class="col-md-6">
<label class="form-label aw-font-freight-medium mb-0"
>First Name*</label
>
<input
type="text"
name="firstname"
class="form-control aw-font-freight-medium aw-firstname"
v-model="contact.firstName"
required
/>
</div>
<div class="col-md-6">
<label class="form-label aw-font-freight-medium mb-0"
>Last Name*</label
>
<input
type="text"
name="lastname"
class="form-control aw-font-freight-medium"
v-model="contact.lastName"
required
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label aw-font-freight-medium mb-0"
>Email Address *</label
>
<input
type="text"
name="email"
class="form-control aw-font-freight-medium"
v-model="contact.email"
required
/>
<small class="form-text text-danger" v-if="msg.email"
>{{msg.email}}</small
>
</div>
</div>
<div class="row mb-3 gx-2">
<div class="col">
<label class="form-label aw-font-freight-medium mb-0"
>Phone*</label
>
<input
type="text"
name="phone"
class="form-control aw-font-freight-medium"
v-model="contact.phone"
required
/>
<small class="form-text text-danger" v-if="msg.phone"
>{{msg.phone}}</small
>
</div>
</div>
<a href="#" target="_blank">
<button type="submit" class="btn aw-bg-orange text-light">
<strong>Download</strong>
</button></a
>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
isSubmitted: false,
msg: [],
contact: {
firstName: "##firstname##",
lastName: "##lastname##",
email: "##email##",
phone: "##phone##",
address: "##address##",
city: "##city##",
state: "##state##",
zip: "##zip##",
checked: false,
},
};
},
watch: {
contact: {
handler(newContact) {
this.validateEmail(newContact.email);
this.validatePhone(newContact.phone);
},
deep: true,
},
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName ||
this.contact.lastName ||
this.contact.email ||
this.contact.phone;
if (!isValid) {
e.preventDefault();
}
},
validateEmail(value) {
if (
/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$/.test(
value
)
) {
this.msg["email"] = "";
} else {
this.msg["email"] = "Please enter a valid email address.";
}
},
validatePhone(value) {
if (
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(
value
)
) {
this.msg["phone"] = "";
} else {
this.msg["phone"] = "Please enter a valid, 10 digit phone number.";
}
},
},
});
app.mount("#awApp");

Answer 1

I think your isValid is not working as you expect
const isValid =
this.contact.firstName ||
this.contact.lastName ||
this.contact.email ||
this.contact.phone;
The value of isValid 👆 will return ##firstname##
You should use && instead of || to make sure all values are set. And you may want to include the validators.
You could do that by having validateEmail and validatePhone return a boolean and then you can do
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.contact.phone &&
this.validateEmail(this.contact.email) &&
this.validatePhone(this.contact.phone);
if (!isValid) {
e.preventDefault();
}
},
update
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
isSubmitted: false,
msg: [],
contact: {
firstName: "##firstname##",
lastName: "##lastname##",
email: "##email##",
phone: "##phone##",
address: "##address##",
city: "##city##",
state: "##state##",
zip: "##zip##",
checked: false,
},
};
},
watch: {
contact: {
handler(newContact) {
this.validateEmail(newContact.email);
this.validatePhone(newContact.phone);
},
deep: true,
},
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.contact.phone &&
this.validateEmail(this.contact.email) &&
this.validatePhone(this.contact.phone);
console.log(isValid)
if (!isValid) {
e.preventDefault();
}
},
validateEmail(value) {
if (
/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$/.test(
value
)
) {
this.msg["email"] = "";
return true
} else {
this.msg["email"] = "Please enter a valid email address.";
return false;
}
},
validatePhone(value) {
if (
/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(
value
)
) {
this.msg["phone"] = "";
return true
} else {
this.msg["phone"] = "Please enter a valid, 10 digit phone number.";
return false;
}
},
},
});
app.mount("#app");
<script src="https://unpkg.com/vue#3.0.11/dist/vue.global.prod.js"></script>
<div id="app">
<form name="mainForm" #submit="submitForm" method="post">
<div>
<div>
<label>First Name*</label>
<input
type="text"
name="firstname"
v-model="contact.firstName"
required
/>
</div>
<div>
<label>Last Name*</label>
<input
type="text"
name="lastname"
v-model="contact.lastName"
required
/>
</div>
</div>
<div>
<div>
<label>Email Address *</label>
<input type="text" name="email" v-model="contact.email" required />
<small v-if="msg.email">{{msg.email}}</small>
</div>
</div>
<div>
<div>
<label>Phone*</label>
<input type="text" name="phone" v-model="contact.phone" required />
<small v-if="msg.phone">{{msg.phone}}</small>
</div>
</div>
<a href="#" target="_blank">
<button type="submit">
<strong>Download</strong>
</button></a
>
<div>
<small>
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>