我想用三种表格订阅时事通讯。用ajax验证字段和推送表单的jquery代码在所有表单中都非常相似。你能帮我减少和优化这段代码吗?这是一个例子,你可以看到我的两个表格...
首先,下面的代码中使用了每种形式的一些变量。在此之后,每个表单的验证都是相同的。如果一切正常,我将在ajax中推送表单;每个表单的ajax代码都非常相似。
谢谢!!
$('#signup-sidebar').submit(function(e) {
e.preventDefault();
// Vérification des erreurs dans les champs
// Basé sur : https://teamtreehouse.com/community/create-a-simple-validation-form-using-jquery
var $newsletterform_sb = $("#signup-sidebar");
var $newsletteremail_sb = $("#sidebar-email");
var $newsletteraccept_sb = $("#sidebar-policy");
var $newsletterresponse_sb = $("#response-sidebar");
var errors_sb = false;
var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i;
// Le courriel est absent ou invalide
if ($newsletteremail_sb.val() === "Votre courriel") {
$newsletteremail_sb.addClass('commenterrorfield').val("Entrez votre courriel");
$newsletteremail_sb.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
} else if (!emailReg.test($newsletteremail_sb.val())) {
$newsletteremail_sb.addClass('commenterrorfield').val("Adresse invalide");
$newsletteremail_sb.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
}
if ($newsletteraccept_sb.is(":not(:checked)")) {
$newsletterresponse_sb.show().attr('class', 'fielderror').html('Vous devez accepter la politique de confidentialité');
$newsletteraccept_sb.on('click focusin', function() {
$newsletterresponse_sb.attr('class', 'fielderrorhide');
});
errors_sb = true;
}
// S'il y a des erreurs, on blogue l'envoi
if (errors_sb) {
event.preventDefault(); // empêche la soumission du formulaire non ajax
// Sinon on procède avec l'ajax...
} else {
$newsletterresponse_sb.attr('class', 'response-sidebar').html('Vérification des informations...').hide().fadeIn(200);
$.ajax({
url: ''+ template_url +'/mailchimp/inscriptions-v2.php',
type: 'POST', // <- IMPORTANT
data: $newsletterform_sb.serialize() + '&ajax=true',
success: function(msg) {
var message = $.parseJSON(msg),
result = '';
if (message.status === 'pending') { // succès
result = 'Merci ! Un courriel vous a été envoyé pour confirmer votre inscription.';
} else { // erreur
//result = 'Erreur : ' + message.detail;
result = 'Erreur ! Adresse non valide ou peut-être déjà inscrite.';
}
$newsletterresponse_sb.html(result); // affichage du message
}
});
return false;
}
});
/*
* Script Newsletter footer
*/
$('#signup-footer').submit(function(e) {
e.preventDefault();
// Vérification des erreurs dans les champs
// Basé sur : https://teamtreehouse.com/community/create-a-simple-validation-form-using-jquery
var $newsletterform_ft = $("#signup-footer");
var $newsletteremail_ft = $("#footer-email");
var $newsletteraccept_ft = $("#footer-policy");
var $newsletterresponse_ft = $("#response-footer");
var errors_sb = false;
var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i;
// Le courriel est absent ou invalide
if ($newsletteremail_ft.val() === "Votre courriel") {
$newsletteremail_ft.addClass('commenterrorfield').val("Entrez votre courriel");
$newsletteremail_ft.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
} else if (!emailReg.test($newsletteremail_ft.val())) {
$newsletteremail_ft.addClass('commenterrorfield').val("Adresse invalide");
$newsletteremail_ft.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
}
if ($newsletteraccept_ft.is(":not(:checked)")) {
$newsletterresponse_ft.show().attr('class', 'fielderror').html('Vous devez accepter la politique de confidentialité');
$newsletteraccept_ft.on('click focusin', function() {
$newsletterresponse_ft.attr('class', 'fielderrorhide');
});
errors_sb = true;
}
// S'il y a des erreurs, on blogue l'envoi
if (errors_sb) {
event.preventDefault(); // empêche la soumission du formulaire non ajax
// Sinon on procède avec l'ajax...
} else {
$newsletterresponse_ft.attr('class', 'response-footer').html('Vérification des informations...').hide().fadeIn(200);
$.ajax({
url: ''+ template_url +'/mailchimp/inscriptions-v2.php',
type: 'POST', // <- IMPORTANT
data: $newsletterform_ft.serialize() + '&ajax=true',
success: function(msg) {
var message = $.parseJSON(msg),
result = '';
if (message.status === 'pending') { // succès
result = 'Merci ! Un courriel vous a été envoyé pour confirmer votre inscription.';
} else { // erreur
//result = 'Erreur : ' + message.detail;
result = 'Erreur ! Adresse non valide ou peut-être déjà inscrite.';
}
$newsletterresponse_ft.html(result); // affichage du message
}
});
return false;
}
});
发布于 2018-06-07 06:03:14
根据您给出的代码,您可以进行重构以重用相同的函数,如下所示:
['sidebar', 'footer'].forEach(function(el) {
$('#signup-' + el).submit(function(e) {
e.preventDefault();
// Vérification des erreurs dans les champs
// Basé sur : https://teamtreehouse.com/community/create-a-simple-validation-form-using-jquery
validateForm(el)
});
})
function validateForm(selector) {
var $newsletterform_sb = $("#signup-" + selector);
var $newsletteremail_sb = $("#"+selector+"-email");
var $newsletteraccept_sb = $("#"+selector+"-policy");
var $newsletterresponse_sb = $("#response-"+selector);
var errors_sb = false;
var emailReg = /^([a-zA-Z0-9\\.]+)@([a-zA-Z0-9\\-\\_\\.]+)\.([a-zA-Z0-9]+)$/i;
// Le courriel est absent ou invalide
if ($newsletteremail_sb.val() === "Votre courriel") {
$newsletteremail_sb.addClass('commenterrorfield').val("Entrez votre courriel");
$newsletteremail_sb.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
} else if (!emailReg.test($newsletteremail_sb.val())) {
$newsletteremail_sb.addClass('commenterrorfield').val("Adresse invalide");
$newsletteremail_sb.on('click focusin', function() {
$(this).removeClass().val("");
});
errors_sb = true;
}
if ($newsletteraccept_sb.is(":not(:checked)")) {
$newsletterresponse_sb.show().attr('class', 'fielderror').html('Vous devez accepter la politique de confidentialité');
$newsletteraccept_sb.on('click focusin', function() {
$newsletterresponse_sb.attr('class', 'fielderrorhide');
});
errors_sb = true;
}
// S'il y a des erreurs, on blogue l'envoi
if (errors_sb) {
event.preventDefault(); // empêche la soumission du formulaire non ajax
// Sinon on procède avec l'ajax...
} else {
sendForm($newsletterform_sb, $newsletterresponse_sb, 'response-'+selector)
return false;
}
}
function sendForm(form, response, elClass) {
response.attr('class', elClass).html('Vérification des informations...').hide().fadeIn(200);
$.ajax({
url: ''+ template_url +'/mailchimp/inscriptions-v2.php',
type: 'POST', // <- IMPORTANT
data: form.serialize() + '&ajax=true',
success: function(msg) {
var message = $.parseJSON(msg),
result = '';
if (message.status === 'pending') { // succès
result = 'Merci ! Un courriel vous a été envoyé pour confirmer votre inscription.';
} else { // erreur
//result = 'Erreur : ' + message.detail;
result = 'Erreur ! Adresse non valide ou peut-être déjà inscrite.';
}
response.html(result); // affichage du message
}
});
}
https://stackoverflow.com/questions/50730009
复制相似问题