Parsley.js strips plus sign (+) from emails in Safari/Firefox?

Question

I'm running into an odd error that is hopefully easy to solve. While people having emails with + signs in them is probably not too common, that is one way that I go about testing my form submissions. Also, if it's stripping other characters that I just haven't tested with yet, that's obviously an issue too.

Basically, say I use: [email protected]. It submits fine, all good. If I use [email protected], it appears in my CRM as "test.email", so everything after the + is removed as well. If I open up the form submission in the contact record, it shows up as "test.email [email protected]", with the space where the + was.

This does not happen in Chrome, but does happen in Safari and Firefox. I should also mention that this is being validated within a modal, which is why the fields are initially using data-parsley-excluded. Those attributes are being removed with jQuery and then the required attribute is being added.

<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="[email protected]" 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>

And here is the JS in case you need that:

<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;                   
                }

            });
        });

    });

I'm not too familiar with cross-browser compatibility with forms and thought that adding novalidate to the form might fix the issue, but that wasn't quite the case. Thank you for any help in advance!

Answer 1

This has nothing to do with Parsley. Remove parsley and you'll have the same issue.

This has everything to do with you trying to re-do what the browser can do for you when posting your results. In particular:

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

You may want to rethink your approach and use a solution that does the submitting for you correctly, like rails-ujs does for remote form. You'll note that they had to write their own serializer. You could probably use rails-ujs directly. If you bind Parsley first it should interact nicely.