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 が値をチェックし、その 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

私が見る限り、あなたのコードにはいくつかの問題があります。主なものをいくつか紹介します。

2 つのイベント リスナーがあります。

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

と

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

.input-textこれは、 2回のぼかし/変更でリスナーをバインドしています。それほど問題ではありませんが、必要ない可能性があります。またselects、あなたの例にはありません。これが間違いなのか、サンプルコードに含まれていないのかはわかりません。また、最初のフィールド グループはクラスのラッパー内に含まれていsingle-attendee-wrapperません (意図されているかどうかは不明ですが、最初のリスナーの現在のセレクターでは機能しません)。

最初のイベントリスナー

あなたが持っている最初のイベントリスナーがすべてのフィールドをループして空かどうかを確認しようとしていると私が知る限り、空のフィールドがある場合はカウントフィールドを灰色がかった色で表示したいと考えています。塗りつぶされ、赤色で表示されます。

これに関する最初の問題は、各ループで jQuery セレクターを$(".single-attendee-wrapper .count").css()複数回使用していることです。このセレクターは、フォーム内のすべてのフィールドに対して 2 回一致します。これは変更されないため、キャッシュする必要があります。次に、CSS をセレクターに一括追加するか、1 つ以上ある場合でも .addClass を使用することをお勧めします。 CSS ルール。CSS にクラス スタイルを追加するだけで、保守性と可読性が向上します。

2 番目の問題は、CSS をループ$(".single-attendee-wrapper .count").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 に設定し、ループ.each後にスタイルをブロックに適用します。このようにして、フィールドのいずれかが無効な場合、groupValid フラグがこれをトリガーします (最後のフィールドだけではありません)。

2 番目のイベント リスナー

あなたのコードには select がないので、これは理論的には最初のイベント リスナーと同じことをしているだけです。おそらく 2 つを組み合わせることを検討してください。これらの処理を個別の関数に分割し、それらの関数を呼び出して、クリーンで明確な状態に保つことができます。

例えば：

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

私が知る限り、2 番目のイベント リスナーは、個々のフィールドの検証をチェックしようとしています。.validate-emailコードをテストすると、電子メール フィールドにクラスがないことを除けば、うまくいくようです。また、chromes インスペクターは正規表現関数について不平を言っているため、機能するようになったら確認する必要があるかもしれません。

とにかく、最初のイベントリスナーは個々のフィールドに対してトリガーするため、フィールドに特定のクラスがある場合にフィールドの検証関数を実行することにより、最初のイベントリスナーにこの機能を追加して、最初の検証関数に関連付けることができます。.hasClassjQuery 関数を使用するとします。

最初のイベント リスナーのソリューション

最初のイベント リスナーに関して私が提起した問題にすぐに対処し、推奨される変更を含むフィドルを作成しました。

フィドル

2 番目のイベント リスナーに関する私の提案が、必要な検証の第 2 段階を完了するためのリファクタリングに役立つことを願っています。

于 2013-09-09T11:32:05.233 に答える