One of the challenges I'm facing is generating a form with Vue.js using the input fields below:
{
name: 'first_name',
type: 'text',
label: 'First Name',
placeholder: 'First Name',
required: true,
validation_message: 'First name is required'
},
{
name: 'email',
label: 'Email',
type: 'email',
placeholder: 'Email',
required: true,
validation_message: 'Email is required'
}
To create the input field, I've implemented it this way:
<input
:type="inputField.type"
:placeholder="inputField.placeholder"
:name="inputField.name"
:id="inputField.name"
v-model="userData[inputField.name]"
/>
I have initialized the data like so:
data() {
return {
userData: {
[this.inputField.name]: ""
},
isInputFieldRequired: this.inputField.required,
isInputFieldEmpty: false
};
}
For checking if the input is empty, I have set up methods as follows:
methods: {
checkIfInputFieldEmpty: function() {
if (this.userData[this.inputField.name] === "") {
return (this.isInputFieldEmpty = true);
}
this.isInputFieldEmpty = false;
},
checkIfRequiredFiledEmpty: function() {
const { name, required } = this.inputField;
return required && this.userData[name] === "";
}
}
The issue I am facing is that when either of the fields is not empty, the form is submitted. How can I resolve this particular problem?