[Vuejs]-Prevent sending data to DB/server if form validation is false (VueJS)

by

0👍

✅

Ok I fixed the problems with sending the data.
It was my fault.

I will copy the Chris answer. That worked.

When you call this.createEori(eoriData);, eoriData is undefined. It doesn’t exist. Use this.createEori(); instead, and in the createEori function, remove the parameter and add var eoriData = {}; as first line. (note this is very basic javascript, how functions and variables work, and completely unrelated to Vue or server requests)

0👍

I think it would be better practice to only call one function from the HTML. Something like this:

<span class="logInBTN" v-on:click="submit(model)">Save</span>

submit(model) {
    if (this.validateForm(model) == true)
    {
        // submission process here (maybe call function2())
    }
}

validateForm(model) {
    if (this.model.codePerson == ''){
        document.getElementById('codePerson').style.borderColor = "red";
        this.errors.push("Choose a type!\n");
        this.handleFalseValidation();
        return false;
    }

    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
    return true;
}

handleFalseValidation() {
    alert("Form validation:\n" + this.errors.join(""));
}

Leave a comment