0

.jsファイルを使用してクライアント側の JavaScript を処理するレガシー コードに取り組んでいます。フォーム上で、ユーザーはプラス ボタンとマイナス ボタンをクリックしてその場でフィールドを作成できます。

ここに画像の説明を入力

私はjqueryでこれをやっています:

$(document).ready(function() 
{  
    var html = "<div class='registration_box01' id='showme'> <div class='title'> <h4>Additional Guest<br /></h4> </div> <div class='content'> <div class='clr'></div> <div class='label01'>*First name:</div> <div class='field01'> <input name='add_fname[]' type='text' size='40' style='min-width:250px;' /> </div> <div class='clr'></div> <div class='label01'>*Last name:</div> <div class='field01'> <input name='add_lname[]' type='text' size='40' style='min-width:250px;' /> </div> <div class='clr'></div> <div class='label01'>*Email:</div> <div class='field01'> <input name='add_email[]' type='text' size='40' style='min-width:250px;'> </div> </div> </div>";
    $(function() {
      $("#inc").click(function() { 
        var num = $(":text[name='qty']").val(function(i, v) { 
                       return Number(v) + 1;
                  }).val();
        $(this).addClass ('c' + num);
        var incrementVar = num;
        $('.additional').append(html);
      }); 

      $("#dec").click(function() {              
        $(":text[name='qty']").val(function(i, v) { 
        $("#showme").remove();
            if(Number(v) > 1){                                              
                return Number(v) - 1; 
            }
            else{    
                return 1;
            }
        });
      });  
    });
});

私の質問は、Javascript で動的フィールドを検証する方法です。それらをチェックするためにjQueryに関数を追加することに反対することはないと思います。フォームを検証する現在の機能:

ペーストビン

HTML:

<form action="register.php" method="post" onsubmit="return validateFrm(this);">
4

1 に答える 1

0

これを行う簡単な方法は、各入力に特定のクラスを与えることだと思います。たとえば、「First Name」テキストボックスには「fname-textbox」というクラスが必要です。検証関数では、すべての「名」テキストボックスを空にしてはならず、少なくとも 2 文字の長さ (または何でも) にする必要があることがわかっています。したがって、次のようなことができます。

function validateFrm(form) {
    var isValid = true;
    var $form = $(form);
    $form.find(".fname-textbox").each(function () {
        var $this = $(this);
        var $this_val = $this.val();
        if (isNaN($this_val) && $this_val.length > 1) {
            $(this).removeClass("input-validation-error");  // won't fail if it doesn't have the class already
            // Remove any other indications of error for this field (like a "*" next to it)
        } else {
            isValid = false;
            $(this).addClass("input-validation-error");  // maybe input-validation-error has a red border and red text color?
            // Maybe add another indication of error for this field (like a "*" next to it)
        }
    });
    // And continue the validation for your other fields
    return isValid;
}
于 2012-08-30T13:24:51.370 に答える