jQueryを使用した入力テキスト検証

Question

私は、入力テキストフィールドに入力されたテキストを検証する必要がある状況があります。これは、HTMLコードです：デフォルトの#txt_bフィールドで

<div id="err_title" style="display:none;">Please enter a valid Number.</div> 
<input type="radio" id="txt_a-radio" value="valueA" checked="checked"> 
<input type="text" id="txt_a"> 
<input type="radio" id="txt_b-radio" value="valueB"> 
<input type="text" id="txt_b" disabled> 

は＃txt_b-ラジオボタン#txt_bをユーザーがクリックすると有効になり、#txt_aが無効になりますと、無効になります。

検証のための条件は次のとおりです。ユーザーが有効になってフィールドに値を入力したら、検証が起こるはず

#txt_a can contain only 12 digit number 
#txt_b can contain only 20 digit number 

その後、どこか外にクリックします。ユーザーが入力した値が有効でない場合、エラーメッセージ#err_titleが表示されます。

ユーザーが#txt_aの値を入力してから＃txt_b-ラジオボタンをクリックすると、ユーザーが入力フィールドを切り替えたので検証が行われないとします。この場合、＃txt_aを無効にしてtxt_bを有効にする必要があります。

$('#txt_a').change(function() { 
    custNumber = $('#txt_a').val(); expression = /^[0-9]{12}$/; 
    if(custNumber === '') { 
     $("#err_title").css('display', 'none'); 
    } else if ((!custNumber.match(regexp))) { 
     $("#err_title").css('display', 'block'); 
    } else { 
     $("#err_title").css('display', 'none'); 
    } 
}); 

Answer 1

$input1 = $('input[name="input1"]'); 
 
$input2 = $('input[name="input2"]'); 
 
$checkbox = $('input[name="checkbox"]'); 
 
    
 

 
$input1.on('change', function(e) { 
 
    var isValid = this.value.length >= 12; 
 
    
 
    this.classList.toggle('notValid', !isValid); 
 
}) 
 

 
$checkbox.on('change', function(e) { 
 
    $input2.prop('disabled', !this.checked); 
 
})

input.notValid { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="input1" /> 
 
<input type="text" name="input2" disabled /> 
 
<input type="checkbox" name="checkbox" />

注：私は、次のコードと試みた

上記の例で 、私はjQueryを使ってvanillia JSを、混合しています。私はそれを避けることをお勧めします - 私はあなたにjQueryを使わないでこのような簡単なことをやってもらうのは簡単です（必ずしもそうではない...）。 基本的に、そのような簡単なことをしたいのなら、私はjQueryをあきらめておくことをお勧めします。

ANSWER：

あなたはjQueryのchangeイベントを探しています。一度入力がゆるくなると、トリガされます。

$(your_input).on('change', function(e) {...})

あなたは（リスナーの内部機能）のような入力の長さを検証することができます

var isValid = this.value.length === 12

同じことが有効/無効に入力して行きます。 あなたは

$(your_checkbox).on('change', function(e) {...})

をcheckboxにイベントリスナーを添付する必要があり、あなたは、チェックボックスの状態を取得することができます：

var isChecked = this.checked

とするために無効に/あなたの入力を可能に

$(your_input).attr('disabled', !isChecked)