2011-07-01 16 views
2

私のフォームには、日と月の2つのフィールドがあります。テキストフィールドの厳密な検証

私はそれを簡単に検証したいと思います。ユーザが月、すなわち12を入力すると、それだけが次のフィールドに移動するためにすべてが遅くなる。

ユーザーが無効な月を入力した場合は、月のフィールドに再度フォーカスし、以前に入力したテキストを選択する必要があります。

私は.focus().select() jQueryの機能を使用しようとしていますが、そのだけでテストする

これはフィクションの検証作業ではない、それは、任意の数または任意のラベルすることができます。

ここではjSFiddle linkです。このHTML

<label for="day">Day<input type="text" id="day" name="day"/></label> 
<label for="month">Month<input type="text" id="month" name="month" maxlength=2/></label> 

併用

<input type="text" id="days" /> <input type="text" id="month" /> 

jQuery("#days").blur(function(){ 
    if(jQuery(this).val() == "12"){ 
     alert("valid"); 
    } 
    else { 
     alert("invalid"); 
     jQuery(this).focus().select();   
    } 
}); 
+0

ぼやけたフィールド – mplungjan

答えて

1
$(function({ 
$('#days').attr("disabled", true); 
}); 
$("#months").blur(function(){ 
    if($(this).val()<1 || $(this).val()>12){ 
     $(this).val() = "error, invalid month"; 
     $(this).css('color', 'red'); 
     $(this).focus(); 
     $('#days').attr("disabled", true); 
     return; 
    } 
else 
{ 
$('#days').attr("disabled", false); 
} 
    }   
}); 
1

これは

$('#day').live('keydown', function(e){ 
    keyCode = e.keyCode || e.which; 
    if(keyCode == 9){ 
     if($(this).val()<1 || $(this).val()>32){ 
      e.preventDefault(); 
      $(this).trigger('select'); 
      console.log('error'); 
     } 
    }   
}); 
$('#month').live('keydown', function(e){ 
    keyCode = e.keyCode || e.which; 
    if(keyCode == 9){ 
     if($(this).val()<1 || $(this).val()>12){ 
      e.preventDefault(); 
      $(this).trigger('select'); 
      console.log('error'); 
     } 
    }   
}); 

リンクJS:http://jsfiddle.net/r6j7C/

1

が、それはblurイベントは、あなたのコードを通過した後で終了している可能性がありをぼやけを引き起こしたものに焦点を当てましたか?コードがjQuery("#days").blurからjQuery("#month").focusに変更された場合、コードを取得できます。

jQuery("#month").focus(function(){ 
       if(jQuery(this).val() == "12"){ 
         alert("valid"); 
       } 
         else 
       { 
         alert("invalid"); 
         jQuery("#days").focus();      
       } 
}); 
+2

にフォーカスを戻すようにするには、setTimeoutを使用する必要があります。これはまさに起きていることです。 setTimeoutを使用して、フォーカスをぼかしフィールドに戻す – mplungjan

1

.focus().select()(あなたがそれらを必要とする何のために)jQueryの機能はありませんが、これらは簡単なJavascriptの機能です。

実際、それらはjQueryで意味を持ち、イベントバインディング(それぞれonfocusとonselect)に使用されます。

あなたは、単にすることによって、それらを呼び出すことができます。あなたは「この要素にフォーカスを設定」と(純粋JSではなく、jQueryの)「は、この要素の内容を選択」機能が必要な場合

this.focus(); 
this.select(); 

関連する問題