jQuery表单验证
这似乎是一个我无法修复的问题，我正在处理需要在更改时验证字段的表单，如果字段无效我希望包装显示红色并在周围添加红色边框inupt字段，以便用户知道表单的哪个部分当前无效以及哪些输入不正确。
如果有人能帮助我，我会非常感激。我附上了我的js，html和屏幕截图，我正在研究woocommerce和wordpress。如果有人可以帮助我解决这个问题，我将非常乐意帮助我回报。
JS
$('form.cart')
/* start ! This section adds & removes red backgroud and border */
.on( 'blur change', '.input-text', function() {
$(".single-attendee-wrapper .input-text").each(function(){
var $this = $(this);
var validated = true;
if ( $(this) ) {
if ( $this.val() == '' ) {
$(".single-attendee-wrapper .count").css('background','#ED616A');
$(".single-attendee-wrapper .count").css('color','#fff');
validated = false;
}
}
if ( validated ) {
$(".single-attendee-wrapper .count").css('background','#D1D3D4');
$(".single-attendee-wrapper .count").css('color','#808285');
}
});
} )
/* This section adds & removes red backgroud and border ! Finish */
.on( 'blur change', '.input-text, select', function() {
var $this = $(this);
var $parent = $this.closest('.form-row');
var validated = true;
if ( $parent.is( '.validate-required' ) ) {
if ( $this.val() == '' ) {
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
validated = false;
}
}
if ( $parent.is( '.validate-email' ) ) {
if ( $this.val() ) {
/* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
var pattern = new RegExp(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((")(((( | )*(
))?( | )+)?(([--]|!|[#-[]|[]-~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([-
-]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*((( | )*(
))?( | )+)?(")))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i);
if ( ! pattern.test( $this.val() ) ) {
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
validated = false;
}
}
}
if ( validated ) {
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field' ).addClass( 'woocommerce-validated' );
}
} )
HTML
<form enctype="multipart/form-data" method="post" class="cart" action="/hardy-group/product/manual-handling-3/?add-to-cart=414" style="background: none repeat scroll 0% 0% transparent;">
<h3 class="addon-name">One Attendee </h3>
<p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required">
<label>Candidate Name </label> <input type="text" value="" name="addon-414-one-attendee-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;">
</p>
<p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required">
<label>Address </label> <input type="text" value="" name="addon-414-one-attendee-address" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-validated">
<label>Candidate Email </label> <input type="text" value="" name="addon-414-one-attendee-candidate-email" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field">
<label>Phone </label> <input type="text" value="" name="addon-414-one-attendee-phone" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field">
<label>N.I Number </label> <input type="text" value="" name="addon-414-one-attendee-n-i-number" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field">
<label>EUSR Number </label> <input type="text" value="" name="addon-414-one-attendee-eusr-number" data-price="" class="input-text addon addon-custom">
</p>
<div class="clear"></div>
</div>
<div class="count item1" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">1</div></div><div class="single-attendee-wrapper item2"><div class=" product-addon product-addon-two-attendees" style="display: block;">
<h3 class="addon-name">Two Attendees </h3>
<p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated">
<label>Candidate Name </label> <input type="text" value="" name="addon-414-two-attendees-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;">
</p>
<p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated">
<label>Address </label> <input type="text" value="" name="addon-414-two-attendees-address" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required">
<label>Candidate Email </label> <input type="text" value="" name="addon-414-two-attendees-candidate-email" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated">
<label>Phone </label> <input type="text" value="" name="addon-414-two-attendees-phone" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required">
<label>N.I Number </label> <input type="text" value="" name="addon-414-two-attendees-n-i-number" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required">
<label>EUSR Number </label> <input type="text" value="" name="addon-414-two-attendees-eusr-number" data-price="" class="input-text addon addon-custom">
</p>
<div class="clear"></div>
</div><div class="count item2" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">2</div></div><div class="single-attendee-wrapper item3"><div class=" product-addon product-addon-three-attendees" style="display: block;">
<h3 class="addon-name">Three Attendees </h3>
<p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required">
<label>Candidate Name </label> <input type="text" value="" name="addon-414-three-attendees-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;">
</p>
<p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required">
<label>Address </label> <input type="text" value="" name="addon-414-three-attendees-address" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required">
<label>Candidate Email </label> <input type="text" value="" name="addon-414-three-attendees-candidate-email" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required">
<label>Phone </label> <input type="text" value="" name="addon-414-three-attendees-phone" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required">
<label>N.I Number </label> <input type="text" value="" name="addon-414-three-attendees-n-i-number" data-price="" class="input-text addon addon-custom">
</p>
<p class="form-row form-row-wide addon-wrap-414-three-attendees validate-required woocommerce-invalid woocommerce-invalid-required-field">
<label>EUSR Number </label> <input type="text" value="" name="addon-414-three-attendees-eusr-number" data-price="" class="input-text addon addon-custom">
</p>
<div class="clear"></div>
</div><div class="count item3" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">3</div></div><div class=" product-addon product-addon-four-attendees" style="display: none;">
</div><div data-price="29.99" data-type="simple" id="product-addons-total"></div>
<div class="quantity buttons_added"><input type="button" class="minus" value="-"><div class="quantity-wrapper" style="display: none;"><label>Number of attendees</label><input type="number" class="input-text qty text" title="Number of attendees" value="1" name="quantity" min="1" step="1"></div><input type="button" class="plus" value="+"></div>
<button class="single_add_to_cart_button button alt" type="submit" style="display: inline-block;">Place Booking</button>
</form>
2 个答案:
答案 0 :(得分：1)
基本上你可以使用jQuery插件http://jqueryvalidation.org/
但是如果你想要自己验证.. 创建一个separe函数，将在key up上调用，您将传递.val（）和id或类检查它 你可以在这里阅读更多内容：http://www.w3schools.com/jsref/event_onkeyup.asp
所以当你传递.val（）时 在功能上你将拥有如果状态 检查值并在向该id添加clas之后：
if(value == true){
id.addClass('green);
}else{
id.addClass('red');
}
CSS
.green{border: 1px solid green;}
.red {border: 1px solid red;}
示例：
<input type="password" id="pass" name="pass" class="vpb" onkeyup="return return check_password_safety(this.value);">
function check_password_safety(safe){
var msg = "";
var pas_safe = $("#pass").val();
var points = pas_safe.length;
var password_info = document.getElementById('password_info'); //output message div
var has_letter = new RegExp("[a-z]");
var has_caps = new RegExp("[A-Z]");
var has_numbers = new RegExp("[0-9]");
var has_symbols = new RegExp("\\W");
if(has_letter.test(pas_safe)) {
points += 4; }
if(has_caps.test(pas_safe)) {
points += 4; }
if(has_numbers.test(pas_safe)) {
points += 4; }
if(has_symbols.test(pas_safe)) {
points += 4; }
if( points >= 24 ) {
msg = '<span style="color: rgb(7, 134, 27);"><b>Strong!</b></span>';
} else if( points >= 16 ) {
msg = '<span style="color: rgb(0, 112, 255);"><b>Good!</b></span>';
} else if( points >= 12 ) {
msg = '<span style="color: #fa0;"><b>Not Safe!</b></span>';
}
else if(pas_safe == ''){
msg ='';
}
else {
msg = '<span style="color: #f00;"><b>Very poor!</b></span>';
}
password_info.innerHTML = msg ;
}
我只传递了值，但你也可以传递元素的ID。
答案 1 :(得分：0)
据我所知，您的代码存在一些问题。我将介绍一些主要的。
您有两个事件监听器
.on( 'blur change', '.input-text', function(){}
和
.on( 'blur change', '.input-text, select', function() {}
这会使听众对.input-text的模糊/更改进行两次绑定。不是一个问题，但可能不需要。此外，您的示例中没有selects，不确定这是错误还是未包含在示例代码中。此外，第一个字段组不会在包含single-attendee-wrapper类的包装器中出现（不确定是否有意，但不能与第一个侦听器中的当前选择器一起使用）。
第一个事件监听器
据我所知，第一个事件监听器是你试图遍历所有字段并检查是否为空，如果有空字段，你想要以灰色显示计数字段，否则，如果全部填写，则显示为红色。
第一个问题是你在每个循环中多次使用jQuery选择器$(".single-attendee-wrapper .count").css()。这个选择器对于表单中的每个字段都匹配两次，这应该被缓存，因为它不会改变，然后你可以将CSS大量添加到选择器，或者最好只使用.addClass，即使你有1个或更多CSS规则。更易于维护和读取，只需将类样式添加到CSS中即可。
第二个问题是，当您在$(".single-attendee-wrapper .count").css()循环的每个循环中将CSS应用于每个.each时，它实际上只会对整个表单中的最后一个字段起作用，因为这是在.each循环中检查的最后一个。尝试使用您的代码，只使用空的验证if statement，您会看到它仅针对上一个EUSR Number字段进行验证。
它也可以将所有single-attendee-wrapper块一起使用，而不是单独使用，假设您要单独验证块。您可以通过选择最接近父single-attendee-wrapper的当前字段来执行此操作，然后只能为该块中的那些字段运行每个循环。
对于实际验证，您要做的是遍历所有字段并检查是否有效，如果没有将单个字段的边框设置为红色$(this).css('border', 'red 1px solid')说明，如果有效则将其设置回默认值灰色$(this).css('border', 'grey 1px solid')。或更好$(this).addClass('itemError');
.itemError{
border: red 1px solid;
}
除此之外，您还想使用validated标志，如果其中任何一个字段无效，则将其设置为false，然后将样式应用于块 AFTER .each循环。这样，如果任何字段无效，groupValid标志将触发此（不仅仅是最后一个字段）。
第二个事件监听器
由于代码中没有选择，这在理论上就像第一个事件监听器一样，也许考虑将两者结合起来。您可以将这些处理拆分为单独的函数，并调用函数以使其保持清洁和清晰。
例如：
.on( 'blur change', '.input-text, select', function() {
validationFunction1();
validationFunction2($this);
}
据我所知，第二个事件监听器试图检查单个字段的验证。通过测试代码，似乎可行，但您的电子邮件字段中没有.validate-email类。此外，chromes检查员正在抱怨你的正则表达式功能，所以你可能需要在它运行后进行检查。
当你的第一个事件监听器触发一个单独的字段时，你可以在这里将这个功能添加到第一个事件监听器，如果它有一个特定的类就运行该字段的验证函数，那么它与第一个事件监听器相关联验证功能。说使用.hasClass jQuery函数。
第一个事件监听器的解决方案
我已经快速解决了我提出的关于第一个事件监听器的问题，并创建了我推荐的更改的小提琴：
希望我对第二个事件监听器的建议可以帮助您重新考虑完成所需的第二阶段验证。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？