0

这似乎是我无法解决的问题，我正在处理一个需要验证更改字段的表单，如果字段无效，我希望换行显示红色并在输入字段周围添加红色边框所以用户知道表单的哪些部分当前无效以及哪些输入不正确。

如果有人可以帮助我，我将不胜感激。我附上了我的 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>

在此处输入图像描述

4

2 回答 2

1

基本上你可以使用 jQuery 插件http://jqueryvalidation.org/

但是，如果您想要自己的验证.. 创建一个单独的函数，该函数将在密钥上调用，您将通过 .val() 和 id 或类检查它，您可以在此处阅读更多信息：http: //www.w3schools.com /jsref/event_onkeyup.asp

因此，当您在函数中传递 .val() 时，您将拥有 if state 检查值并在将 clas 添加到该 id 之后：

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。

于 2013-09-09T08:55:24.530 回答
0

据我所知，您的代码存在一些问题。我将介绍一些主要的。

你有两个事件监听器

.on( 'blur change', '.input-text', function(){}

和

.on( 'blur change', '.input-text, select', function() {}

.input-text这是在两次模糊/更改上绑定侦听器。问题不大，但可能不需要。您的示例中也没有selects，不确定这是错误还是未包含在您的示例代码中。此外，第一个字段组不包含在single-attendee-wrapper类的包装器中（不确定是否有意，但不适用于第一个侦听器中的当前选择器）。

第一个事件监听器

据我所知，您拥有的第一个事件侦听器正在尝试遍历所有字段并检查是否为空，如果有任何空字段，您希望以灰色显示计数字段，否则如果全部填好后，显示为红色。

第一个问题是您$(".single-attendee-wrapper .count").css()在每个循环中多次使用 jQuery 选择器。此选择器为表单中的每个字段匹配两次，这应该被缓存，因为它不会改变，然后您可以将 CSS 批量添加到选择器，或者最好只使用 .addClass，即使您有 1 个或更多CSS 规则。更具可维护性和可读性，只需将类样式添加到您的 CSS。

第二个问题是，当您将 CSS 应用于$(".single-attendee-wrapper .count").css()循环的每个循环时.each，它实际上只会针对整个表单中的最后一个字段起作用，因为这是在.each循环中检查的最后一个字段。尝试使用您的代码并且仅使用空验证if statement，您会看到它仅针对最后一个EUSR Number字段进行验证。

假设您想单独验证块，它single-attendee-wrapper也不是单独地对所有块一起执行此操作。您可以通过选择最接近父级的当前字段来执行此操作，single-attendee-wrapper然后每个循环只能针对该块中的那些字段运行。

对于实际验证，您要做的是遍历所有字段并检查是否有效，如果不将单个字段的边框设置为 red $(this).css('border', 'red 1px solid')say 并且如果有效则将其设置回默认的 gray $(this).css('border', 'grey 1px solid')。或更好$(this).addClass('itemError');

.itemError{
    border: red 1px solid;
}

除此之外，您还想使用您的validated标志，然后如果任何一个字段无效，则将其设置为 false，然后在循环之后将样式应用于块。.each这样，如果任何字段无效， groupValid 标志将触发它（不仅仅是最后一个字段）。

第二个事件监听器

由于您的代码中没有选择，这在理论上与第一个事件侦听器相同，也许考虑将两者结合起来。您可以将这些处理拆分为单独的函数并调用这些函数以保持干净和清晰。

例如：

.on( 'blur change', '.input-text, select', function() {
  validationFunction1();
  validationFunction2($this);
}

据我所知，第二个事件侦听器正在尝试检查单个字段的验证。并且通过测试您的代码，似乎可以正常工作，只是您的电子邮件字段上没有.validate-email课程。chromes 检查器也在抱怨你的正则表达式函数，所以一旦你让它工作，你可能需要检查它。

由于您的第一个事件侦听器正在触发单个字段，因此您可以在此处组合将此功能添加到第一个事件侦听器，方法是运行该字段的验证函数（如果它具有某个类），这样它就绑定到第一个验证函数。说使用.hasClassjQuery函数。

第一个事件监听器的解决方案

我很快解决了我提出的关于第一个事件监听器的问题，并用我推荐的更改创建了一个小提琴：

小提琴

希望我对第二个事件侦听器的建议可以帮助您重新考虑以完成所需的第二阶段验证。

于 2013-09-09T11:32:05.233 回答