jQuery 用于发送 email

Question

I've recently don't know having an issue with js sending an email here in the my js code well it's validating, and sending to Sendgrid API:

var contact = new Vue({
    el: '#form_contact',
    data: {
        company_name: null,
        fullname: null,
        email: null,
        message: null,
    },
    watch: {
        company_name: function(value) {
            if (! $.isEmptyObject(value) ) {
                $('#company_name')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else {
                $('#company_name')
                    .find('small')
                    .addClass('text-danger')
                    .text('Company name is required');
            }

        },
        fullname: function(value) {
            if (! $.isEmptyObject(value) ) {
                $('#fullname')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else {
                $('#fullname')
                    .find('small')
                    .addClass('text-danger')
                    .text('Full name is required');
            }

        },
        email: function(value) {
            if (! $.isEmptyObject(value) && validateEmail(value) == true) {
                $('#email')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else if (!$.isEmptyObject(value) && validateEmail(value) == false) {
                $('#email')
                    .find('small')
                    .addClass('text-danger')
                    .text('Invalid email address');
            } else {
                $('#email')
                    .find('small')
                    .addClass('text-danger')
                    .text('Email is required');
            }
        },
        message: function(value) {
            if (this.message == 0) {
                $('#message')
                    .find('small')
                    .addClass('text-danger')
                    .text('This is required');
                errors.push('This is required');
            } else {
                $('#message')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            }
        },
    },
    methods: {
        validateMobileNumber: function(event) {
            var phoneNumber = event.target.value;
            this.doValidatePhoneNumber(phoneNumber);
        },
        doValidatePhoneNumber: function(phoneNumber) {
            this.mobileNumber = phoneNumber;
            if (!phoneNumber) {
                $('#mobilenumber').find('small')
                    .addClass('text-danger')
                    .text('Phone number is required');
                return false;
            }

            var mobilePattern = /^[\+]?[(]?[0-9]{2}[)]?[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{2,8}$/im;
            if(phoneNumber.match(mobilePattern)) {
                $('#mobilenumber')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
                return true;
            }

            var phonePattern = /^[\+]?([0-9]{3})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{2,5})$/;
            if(phoneNumber.match(phonePattern)) {
                $('#mobilenumber')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
                return true;
            }

            $('#mobilenumber').find('small')
                .addClass('text-danger')
                .text('Invalid phone number');

            return false;
        },
        doSend: function() {
            var app = this;
            var errors = [];
            if (! $.isEmptyObject(app.company_name) ) {
                $('#company_name')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else {
                $('#company_name')
                    .find('small')
                    .addClass('text-danger')
                    .text('Project deliverable is required');
                errors.push('Project deliverable is required');
            }

            if (! $.isEmptyObject(app.fullname) ) {
                $('#fullname')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else {
                $('#fullname')
                    .find('small')
                    .addClass('text-danger')
                    .text('Expected result is required');
                errors.push('Expected result is required');
            }

            if (! $.isEmptyObject(app.message) ) {
                $('#message')
                    .find('small')
                    .removeClass('text-danger')
                    .text('');
            } else {
                $('#message')
                    .find('small')
                    .addClass('text-danger')
                    .text('Expedted tech stack is required');
                errors.push('Expedted tech stack is required');
            }

            if (errors.length > 0) {
                return false;
            }

            if (validateCaptcha() == false) {
                return false;
            }

            var form = this;
            var formData = {
                'company_name': form.company_name,
                'fullname': form.fullname,
                'email': form.email,
                'message': form.message,
            }

            console.info(formData);

            $.ajax({
                url: AppConfig().apiUri,
                type: "POST",
                dataType: "json", // expected format for response
                jsonp: false,
                data: formData,
                beforeSend: function() {
                    console.info('send to server');
                    $('#btn-draft').attr('disabled', 'disabled');
                    $('#btn-booked').attr('disabled', 'disabled');

                    $('#btn-send').text('Please wait..');
                    $('#btn-send').attr('disabled', 'disabled');
                },
                complete: function() {
                    $('#btn-draft').removeAttr('disabled', 'disabled');
                    $('#btn-booked').removeAttr('disabled', 'disabled');
                },
                success: function(data) {
                    console.info('message has been deliver');
                    $('#error-container').hide();
                    $('#error-container').removeClass('alert-danger');

                    $('#btn-send').text('Message was delivered..');
                    window.location.replace(AppConfig().redirectUri);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#btn-draft').removeAttr('disabled', 'disabled');
                    $('#btn-booked').removeAttr('disabled', 'disabled');
                    $('#btn-send').text('Submit');
                    if (jqXHR.status == 404) {
                        $('#error-container').show();
                        $('#error-container').addClass('alert-danger');
                        $('#error-container').text('End-point 404');
                        return false;
                    }

                    if (jqXHR.status == 400) {
                        var response = JSON.parse(jqXHR.responseText);
                        $('#error-container').show();
                        $('#error-container').addClass('alert-danger');
                        $('#error-container').text(`${response.message}`);
                    }

                    if (jqXHR.status == 500) {
                        $('#error-container').show();
                        $('#error-container').addClass('alert-danger');
                        $('#error-container').text(`Internal server error`);
                    }
                },
            });
        }
    }
});

function validateEmail(inputText) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(inputText.match(mailformat)) {
        return true;
    } else {
        return false;
    }
}

function validateMobileNumber(mobileNumber) {
    var validMobileNumber = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
    if(mobileNumber.match(validMobileNumber)) {
        return true;
    } else {
        return false;
    }
}

And I don't know when I checked on the console.log it appeared an error occurred with:

[Vue warn]: Error in callback for watcher "message": "ReferenceError: errors is not defined"

Even tho I added the reference for message id it seems that error still occurred

Answer 1

You only declare errors in the doSend function.

You need to go ahead and declare it in your data object so that the Vue instance has access to it.