Запретить отправку данных на БД / сервер, если проверка формы неверна (VueJS)

Question

Я хочу прекратить отправку информации, если проверка формы неверна. У меня есть кнопка Сохранить с двумя функциями:

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

Проверка формы обрабатывается в validationFields():

validationFields() {
  if (this.model.codePerson == '') {
    document.getElementById('codePerson').style.borderColor = "red";
    this.errors.push("Choose a type!\n");
    falseValidation = true;
  } else {
    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
  }

  if (falseValidation == true) {
    alert("Form validation:\n" + this.errors.join(""));
  }
}

Так что если в поле ввода не выбран тип, function2() не должен продолжаться.

Update1:

<script>
    export default {
        components: {

        },
        data(){
            return {
                errors: [];
            },
        },
        methods: {
            validationFields() {

                this.errors = [];
                var falseValidation = false;

                if (this.model.codePerson == '') {
                    document.getElementById('codePerson').style.borderColor = "red";
                    this.errors.push("Choose a type!\n");
                    falseValidation = true;
                } else {
                    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
                }

                if (falseValidation == true) {
                alert("Form validation:\n" + this.errors.join(""));
                }

                if(falseValidation == false){
                    this.createEori(eoriData);
                }
            }

            createEori(eoriData) {
                eoriData.state = '1';
                eoriData.username = this.$session.get('username');
                console.log("updateEori state: " + JSON.stringify(eoriData));
                const url = this.$session.get('apiUrl') + 'registerEORI';
                this.submit('post',
                    url,
                    eoriData
                );
            },

            submit(requestType, url, submitData) {
                this.$http[requestType](url, submitData)
                    .then(response => {
                    console.log('EORI saved!');
                console.log('Response:' + response.data.type);
                if("E" == response.data.type){
                    alert(response.data.errorDescription);
                    } else {
                        alert("Saved!");
                    }
                })
                .catch(error => {
                console.log('EORI rejected!');
                console.log('error:' + error);
                });
            },
        },
    }
</script>

createEORI - это функция2

Update2

Теперь это работает, но данные из полей не отправляются на сервер. Это все поля со страницы, некоторые из них являются датчиками или обычным полем ввода текста. Перед изменением в консоли браузера покажите это, если я напишу имя в первом поле, оно будет отображаться в c1_name и т. Д .:

{"state":"1","c1_form":"","c1_identNumber":"","c1_name":"","c1_shortName":"","c1_8_street":"","c1_8_pk":"","c1_8_name":"","c1_8_city":"","c1_8_codeCountry":"","c1_identNumber1":"","c3_name":"","c3_nameShort":"","c3_city":"","c3_codeCountry":"","c3_street":"","c3_pk":"","c3_phone":"","codePerson":"","codeActivity":"","c1_date":"","c5_date":"","c7_date":"","dateFrom":"","dateTo":"","c8_date":"","c1_numberVAT":"","c8_provider":"","c8_number":"","codeMU":"","agreed1":"","agreed2":"","username":"testuser"}

Однако после изменения отправленные данные или хотя бы просмотренные данные составляют только:

{"state":"1","username":"testuser"}

Журнал из

console.log("updateEori state: " + JSON.stringify(eoriData));

из функции createEORI ()

Answer 1

Хорошо, я исправил проблемы с отправкой данных. Это я был виноват.

Я скопирую ответ Криса. Это сработало.

Когда вы звоните this.createEori(eoriData);, eoriData не определена. Не существует Вместо этого используйте this.createEori();, а в функции createEori удалите параметр и добавьте var eoriData = {}; в качестве первой строки. (обратите внимание, что это очень простой JavaScript, как работают функции и переменные, и он совершенно не связан с запросами Vue или сервера)

Answer 2

Я думаю, что было бы лучше практиковать вызов только одной функции из HTML. Примерно так:

<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(""));
}