Parsley.jsはSafari/Firefoxのメールからプラス記号（+）を削除しますか？

Question

私は奇妙なエラーに遭遇しており、うまくいけば簡単に解決できます。 +記号が付いた電子メールを持っている人はあまり一般的ではないかもしれませんが、それは私のフォーム投稿をテストするための一つの方法です。また、まだテストしていない他の文字を取り除くと、明らかに問題になります。

基本的には、test.email@gmail.comを使用しています。それは良い、すべて良い提出する。私がtest.email+2@gmail.comを使用すると、それは私のCRMに "test.email"と表示され、+の後のすべても同様に削除されます。連絡先レコードのフォーム提出を開くと、「test.email 2@gmail.com」と表示されます。スペースは+です。

これはChromeでは発生しませんが、SafariとFirefoxでは発生します。これはモーダル内で検証されていることにも言及する必要があります。そのため、フィールドは最初にdata-parsley-excludedを使用しています。これらの属性はjQueryで削除され、必要な属性が追加されています。私は、フォームとのクロスブラウザの互換性を持つ、あまりにも慣れていないんだと、フォームにnovalidateを追加すると、問題を解決するかもしれないと思った

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

      }); 
     }); 

    }); 

：

<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="kevinbacon@yourcompany.com" 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ですしかし、それは事実ではありませんでした。 事前に助けていただきありがとうございます！

Answer 1

これはParsleyとは関係ありません。パセリを取り除くと、同じ問題が発生します。

これは、結果を投稿するときにブラウザが行うことができることをやり直そうとしているすべてのことを行います。特に：

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

あなたはあなたのアプローチを再考し、rails-ujsは、リモート形の場合と同様に、正確に、あなたのために提出しないソリューションを使用することをお勧めします。あなたはtheir own serializerと書かなければならないことに気づくでしょう。あなたはおそらくrails-ujsを直接使用することができます。最初にParsleyをバインドするとうまくやりとりするはずです。