Parsley.js 从 Safari/Firefox 中的电子邮件中去除加号 (+)？

Posted 2023-05-09

【中文标题】Parsley.js 从 Safari/Firefox 中的电子邮件中去除加号 (+)？

【英文标题】：Parsley.js strips plus sign (+) from emails in Safari/Firefox?

【发布时间】：2017-05-07 10:57:07

【问题描述】：

我遇到了一个奇怪的错误，希望很容易解决。虽然人们在电子邮件中带有 + 号可能不太常见，但这是我测试表单提交的一种方式。此外，如果它正在剥离我尚未测试过的其他字符，那显然也是一个问题。

基本上，假设我使用：[e-mail]。它提交很好，一切都很好。如果我使用 [e-mail]，它在我的 CRM 中显示为“test.email”，因此 + 之后的所有内容也会被删除。如果我在联系人记录中打开表单提交，它会显示为“test.email [e-mail]”，其中 + 所在的空格。

这不会发生在 Chrome 中，但会发生在 Safari 和 Firefox 中。我还应该提到，这是在模态中验证的，这就是这些字段最初使用data-parsley-excluded 的原因。使用 jQuery 删除这些属性，然后添加所需的属性。

<form accept-charset="UTF-8" id="become-sponsor-form"  class="x-form" method="POST" novalidate>
                        <input name="x-name" type="hidden" value="xxxx" />
                        <input name="x-name2" type="hidden" value="X Value" />
                        <div class="bs-callout bs-callout-warning invisible mx-auto">
                            <p>Please fill out all required fields.</p>
                        </div>
                        <div class="form-group">
                            <label for="FirstName">First Name</label>
                            <input class="form-control" id="FirstName" name="FirstName" type="text" placeholder="Kevin" data-parsley-trigger='change' data-parsley-excluded data-parsley-group='block1'/>
                        </div>
                        <div class="form-group">
                            <label for="LastName">Last Name</label>
                            <input class="form-control" id="LastName" name="LastName" type="text" placeholder='Bacon' data-parsley-trigger='change' data-parsley-excluded data-parsley-group='block1'/>
                        </div>
                        <div class="form-group">
                            <label for="Email">Email</label>
                            <input class="form-control" id="Email" name="Email" type="email" placeholder="[e-mail]" data-parsley-type='email' data-parsley-trigger='change' data-parsley-excluded data-parsley-group='block1'/>
                        </div>
                        <div class="form-group">
                            <label for="Phone1">Phone</label>
                            <input type="tel" class="form-control" id="Phone1" minlength = '10' maxlength="14" data-parsley-error-message='Must be minimum of 10 digits' data-parsley-trigger='change' data-parsley-excluded data-parsley-group='block1'/>
                            <input id="hidden-number" name='Phone1' type="hidden" name="phone-full">
                        </div>
                        <div class="form-group">
                            <label for="CompanyType">Type of Business</label>
                            <input class="form-control" id="CompanyType" name="CompanyType" type="text" placeholder='Ecommerce, Marketing Agency, etc.' data-parsley-trigger='change' data-parsley-excluded data-parsley-group='block1'/>
                        </div>
                        <input type="submit" id="submit_button" value="Submit" class="btn btn-primary btn-block"/>
                    </form>

如果你需要，这里是 JS：

<script type="text/javascript">
    $(document).ready(function () 
        $('#become-sponsor-btn').on('click', function() 

            $("#FirstName, #LastName, #Email, #Phone1, #CompanyType").attr("required", true);

            $("#FirstName, #LastName, #Email, #Phone1, #CompanyType").removeAttr("data-parsley-excluded");

            $('#become-sponsor-form').parsley().on('field:validated', function() 
                var ok = $('.parsley-error').length === 0;
                if (this.$element.hasClass('parsley-error')) 
                    $('.bs-callout-warning').toggleClass('invisible', ok);
                ;
            ); 
        );

        $("#become-sponsor-form").on('submit', function(e)
            e.preventDefault();
            $('#become-sponsor-form').parsley().on('form:validate', function (formInstance) 
                var success = formInstance.isValid(group: 'block1');
                console.log(success);
                if (success) 
                    var form_data = $("#become-sponsor-form").serialize();

                     $("#become-sponsor-form").html('<div class="loading_message text-center"><i class="fa fa-cog fa-spin fa-3x fa-fw"></i></div>');
                     $.post("formaction.php", form_data, function(result)
                        $("#become-sponsor-form").html('<div class="success_message alert alert-success text-center" role="alert">Thank You.. We will contact you soon...</div>');
                    );

                 else 
                    e.preventDefault();
                    return false;                   
                

            );
        );

    );

我不太熟悉表单的跨浏览器兼容性，并认为在表单中添加novalidate 可能会解决问题，但情况并非如此。 提前感谢您的帮助！

【问题讨论】：

+ 是 URL 编码格式中空格的替代品。但是.serialize() 应该在值中编码+ 符号，所以这应该不是问题。

【参考方案1】：

这与欧芹无关。去掉欧芹，你也会遇到同样的问题。

这与您在发布结果时尝试重新执行浏览器可以为您执行的操作有关。特别是：

$('<form><input name="foo" value="a+b"></form>').serialize()  // => "foo=a%2Bb"

您可能需要重新考虑您的方法并使用正确提交的解决方案，就像 rails-ujs 对远程表单所做的那样。你会注意到他们必须写their own serializer。您可能可以直接使用rails-ujs。如果你先绑定 Parsley，它应该可以很好地交互。

【讨论】：

马克-安德烈，感谢您的评论！这是我正在尝试将表单验证应用到的一些遗留代码（并且对编程世界来说总体上是相对较新的），所以我仍然不太确定从这里去哪里。通过让我知道这绝对不是 Parsley 错误，至少排除了一个罪魁祸首，所以我将更多地研究跨浏览器表单提交和该领域的最佳实践。再次感谢！