我遇到了一个奇怪的错误,希望很容易解决。虽然拥有带有 符号的电子邮件的人可能并不常见,但这是我测试我的表格提交的一种方式。另外,如果它剥离了我还没有测试过的其他角色,那显然也是一个问题。
基本上,我使用:test.email@gmail.com。它很好,一切都很好。如果我使用test.email 2@gmail.com,它将在我的CRM中显示为" test.email",因此 之后的所有内容也被删除。如果我在联系人记录中打开表单提交,则显示为" test.email 2@gmail.com",其中 所在的空间。
这不是在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="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,以防您需要:
<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
添加到表格中可能会解决该问题,但事实并非如此。感谢您提前的帮助!
这与欧芹无关。删除欧芹,您将遇到相同的问题。
这与您有关,试图重新做浏览器在发布结果时可以为您做些什么。特别是:
$('<form><input name="foo" value="a+b"></form>').serialize() // => "foo=a%2Bb"
您可能需要重新考虑您的方法,并使用解决方案,该解决方案像Rails-ujs一样正确地为您提交了您的方法。您会注意到他们必须编写自己的序列化器。您可能可以直接使用rails-ujs
。如果您首先绑定欧芹,则应很好地相互作用。