首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我想减少在ajax中对3个表单验证有类似代码的jQuery

我想减少在ajax中对3个表单验证有类似代码的jQuery
EN

Stack Overflow用户
提问于 2018-06-07 05:38:49
回答 1查看 20关注 0票数 0

我想用三种表格订阅时事通讯。用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;
        }
    });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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
              }
          });
      }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50730009

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档