My page is displaying user data, which he can edit.
I’m working with views, on a small project. I want to do form validation with regex, but nothing happens. Exemple, When I write an email that does not respect the syntax of a regex no message is displayed.
When the regex is valid the validation message also does not appear.
<script>
import UsersDataService from "../Service/UsersDataService";
import VueJwtDecode from "vue-jwt-decode";
export default {
name: "ProfilConnect",
data() {
return {
user: {},
firstname: "",
lastname: "",
email: "",
};
},
watch: {
email(email) {
this.email = email;
this.validateEmail(email);
},
},
methods: {
validateEmail(email) {
//**** Regex pour l'email***/
if (
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/.test(
email
)
) {
//******Message d'alerte******/
this.msg["email"] = "Valid";
} else {
this.msg["email"] = "Email no valid";
}
},
updateProfil() {
let data = {
firstname: this.user.firstname,
lastname: this.user.lastname,
email: this.user.email,
};
UsersDataService.putUser(data);
this.$store
.dispatch("logout")
.then((response) => {
this.user.email = this.email;
this.$router.push("/login");
console.log("Data: ", response.data);
})
.catch((error) => {
console.error("Something went wrong!", error);
});
},
},
mounted() {
this.getProfilUser();
this.email = "";
},
};
</script>
<form class="background-style">
<div class="form-group">
<label class="form-label">Prénom</label>
<input
type="text"
class="form-control"
:value="user.firstname"
/>
</div>
<div class="form-group">
<label class="form-label">Nom</label>
<input
type="text"
class="form-control"
:value="user.lastname"
/>
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input
type="email"
class="form-control"
:value="user.email"
/>
</div>
<div class="btn rounded p-1">
<button
class="rounded p-2"
@click.prevent="updateProfil"
>
Update
</button>
</div>
</form>