0

注文フォーム用に、ユーザーが値を入力できるフォームを作成しようとしています。フォームが読み込まれると、何も含まれていない、または値が100を超えるすべての行を強調表示し、これが修正されたときに強調表示を解除する必要があります。

また、送信ボタンがあります-テキストボックスのいずれかが強調表示されている場合は、これを無効にする必要があります

これが私がこれまでに持っているコードです-誰かが何かアイデアを持っていますか？

$(':text').focusin(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});

$(':text').change(function() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
});
4

3 に答える 3

2

要素を変更するときに、要素にクラス（つまり、「red_bg」）を追加することをお勧めします。これにより、送信ボタンをいつ有効にするかを簡単に判断できます（つまり$('.red_bg').length == 0）。

このようなことをする必要があります：

function validateField(jqSelector) {
    var inp = jqSelector.val();
    var regex = new RegExp(/^\d+$/);
    if (regex.test(inp) && parseInt(inp) <= 100) {
        $(this).removeClass('red_bg');
    } else {
        $(this).addClass('red_bg')
    }
    setSubmit();
}

function setSubmit() {
    $('.red_bg').length == 0) {
        $('#submit_id').removeAttr('disabled');
    }  else {
        $('#submit_id').attr('disabled', 'disabled');
    }
}


$(function () {
    $(':text').focusin(function() {
        validateField($(this));
    }).change(function() {
        validateField($(this));
    }).each(function() {
        validateField($(this));
    });
});

現時点で正規表現を使用して示したように、より詳細な検証の使用を検討する可能性があることに注意してください。入力された値が数値であることを検証するために何もしていません。

于 2013-01-12T00:28:15.120 に答える
0

これでうまくいくと思います、http：//jsfiddle.net/fr85u/

HTML

<form>
  <input />
  <input value="101"/>
  <input value="99"/>
  <button disabled="disabled"> submit </button>
</form>

JS

$('input').each(function(){
  var $this = $(this),
      val = $this.val();

  if(val > 100 || val === ''){
     $this.addClass('red');
  }
}).on('blur', function(){
  var $this = $(this),
      val = $this.val();

  $this.toggleClass('red', val === '' || val > 100);

  $('button').prop('disabled', $("input.red").length > 0);  
});

CSS

.red{
   background-color: red;
}
于 2013-01-12T00:29:31.980 に答える
0

イベントハンドラー関数はまったく同じように機能するため、コードを次のように書き直すことができます。

function test() {
    var inp = $(this).val();
    if (inp > 100) {
        $(this).css('background-color', 'red');
    }
    if (inp.length < 1) {
        $(this).css('background-color', 'red');
    }
    if (inp.length > 0 && inp <= 100) {
        $(this).css('background-color', 'white');
    }
};

$(':text').focusin(test).change(test);
test();

最後から2番目の行は、イベントハンドラーを両方のイベントにアタッチし、最後の行は最初に強調表示機能を実行します。

于 2013-01-12T00:29:39.517 に答える