Я недавно не знал, что у js возникла проблема с отправкой электронной почты здесь, в моем коде js, это проверка и отправка в 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;
}
}
И я не знаюкогда я проверил на console.log, появилась ошибка:
[Vue warn]: Error in callback for watcher "message": "ReferenceError: errors is not defined"
Даже если я добавил ссылку на идентификатор сообщения, кажется, что ошибка все еще произошла