我对JS/jQuery有点陌生,在页脚有一个表单和一个全局表单,用于时事通讯,这似乎与电子邮件字段验证....相冲突我知道需要改变什么来解决这个问题,那就是将验证单击/电子邮件检查功能附加到元素的父表单,但对于我的生活无法解决。
所以在一个but shell中,需要下面的内容来为它的父表单工作,因为它似乎影响了使用相同验证的其他表单。
$( document ).ready(function() {
function validateEmail($email) {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
return emailReg.test( $email );
}
function inputReset(element) {
if (element.hasClass('error')) {
element.removeClass("error");
element.siblings('.error-message').remove();
}
}
// Validation
$('.validate-form').on('click', function(event) {
event.preventDefault();
var valid = true,
message = '';
$('form.validate input').each(function() {
var $this = $(this);
inputReset($this);
if($this.prop('required')){
// check for errors, if found lets get the messages for output
if(!$this.val()) {
$(this).addClass("error");
var inputName = $this.attr('name');
message = $this.data('error-message');
valid = false;
}
// validate the email input
if($(this).hasClass('validate-email')) {
var emailAddress = $this.val();
if(!validateEmail(emailAddress)) {
$this.addClass("error");
valid = false;
}
}
$('.error-message[data-input-name="' + inputName + '"]').remove();
// if not validated lets display the errors
if(!valid) {
//alert(message);
$this.after('<div class="error-message" data-input-name="' + inputName + '">' + message + '</div>');
}
}
});
if(valid) {
$(".validate-form").submit();
}
});
});
我想添加全局变量
form = $(this).closest("form").attr('id')
我认为这是正确的方法....但是我猜lol
页面表单:
<div class="col-right form-vertical">
<form id="email_page_signup" class="klaviyo_bare_embed_twtw2v validate" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate>
<input type="hidden" name="g" value="twtw2v">
<input type="hidden" name="$fields" value="first_name,last_name" />
<div class="klaviyo_messages">
<div class="success_message">
<p class="thank_you notice success" style="display:none;">Thank's for signing up to The newsletter!</p>
</div>
</div>
<div class="klaviyo_field_group">
<label for="k_id_first_name" class="kl_label">First Name:</label>
<input type="text" value="" name="first_name" id="k_id_first_name" data-error-message="You forgot to enter your first name." required />
</div>
<div class="klaviyo_field_group">
<label for="k_id_last_name" class="kl_label">Last Name:</label>
<input type="text" value="" name="last_name" id="k_id_last_name" data-error-message="You forgot to enter your last name." required />
</div>
<div class="klaviyo_field_group">
<label for="k_id_email" class="kl_label">E-mail:</label>
<input type="email" value="" name="email" id="k_id_email" class="validate-email" data-error-message="Seem's the email address you entered is invalid." required />
</div>
<div class="klaviyo_form_actions">
<button type="submit" class="btn klaviyo_submit_button validate-form">Sign Up</button>
</div>
</form>
</div>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_page_signup', {
hide_form_on_success: true,
success: function ($form) {
$(".kl_label").hide();
$(".klaviyo_messages .success_message .thank_you").show();
},
custom_success_message: true,
extra_properties: {
$source: 'The Signup',
Brand: 'brand name'
}
});
</script>
页脚注册:
<form id="email_signup" class="klaviyo_bare_embed_qd9hAF validate input-group" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate>
<input type="hidden" name="g" value="qd9hAF">
<div class="klaviyo_messages">
<div class="success_message">
<p class="thank_you notice success" style="display:none;">Thank's for signing up to the Skinnydip newsletter!</p>
</div>
</div>
<div class="klaviyo_field_group">
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" name="email" id="k_id_email" class="validate-email input-group-field" autocorrect="off" autocapitalize="off" placeholder="Enter your email address" data-error-message="Seem's the email address you entered is invalid." required />
</div>
<div class="klaviyo_form_actions input-group-btn">
<button type="submit" class="btn klaviyo_submit_button validate-form">Sign Up</button>
</div>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_signup', {
hide_form_on_success: true,
success: function ($form) {
//$(".kl_label").hide();
$(".klaviyo_messages .success_message .thank_you").show();
},
custom_success_message: true,
extra_properties: {
$source: 'Site Sign Up',
Brand: 'brand name'
}
});
</script>
您遇到的麻烦是因为用于获取输入字段的jQuery选择器正在扫描整个页面。它们应该只搜索与触发验证的表单相关的输入。
您在获得最接近验证单击上下文的表单的正确轨道上。注意这些变化:
获取格式:var form = $(this).closest("form");
搜索表单中的输入字段:
form.find('input').each(function() {
只清除来自特定表单的错误消息:
form.find('.error-message[data-input-name="' + inputName + '"]').remove();
只提交特定的表单,而不是两个都提交:
form.submit();
完全改变:
$('.validate-form').on('click', function(event) {
event.preventDefault();
var form = $(this).closest("form");
var valid = true,
message = '';
form.find('input').each(function() {
var $this = $(this);
inputReset($this);
if($this.prop('required')){
// check for errors, if found lets get the messages for output
if(!$this.val()) {
$(this).addClass("error");
var inputName = $this.attr('name');
message = $this.data('error-message');
valid = false;
}
// validate the email input
if($(this).hasClass('validate-email')) {
var emailAddress = $this.val();
if(!validateEmail(emailAddress)) {
$this.addClass("error");
valid = false;
}
}
form.find('.error-message[data-input-name="' + inputName + '"]').remove();
// if not validated lets display the errors
if(!valid) {
//alert(message);
$this.after('<div class="error-message" data-input-name="' + inputName + '">' + message + '</div>');
}
}
});
if(valid) {
form.submit();
}
});