エラーを表示するjQueryアウトラインのテキストフィールド

Question

私はtextfieldを持っていますが、textfieldがhold three charactesでない場合、送信ボタンを無効にしています。私が今したいことは、textfield太字の赤いの輪郭であり、まだsubmitボタンが無効になっていますが、textfieldの概要と同時にサブミットbuttonを無効にできないようです。

送信ボタンを無効にするためのコードは次のとおりですtextfieldこの機能のlength is < 3は？

任意のヘルプ

$(function() { 

     $('input[name="updateMessage"]').attr('disabled','disabled'); 
     $('input[name="selectMessageForUpdate"]').keyup(function(){ 
      if($('input[name="selectMessageForUpdate"]').val().length < 3) 
      { 
       $('input[name="updateMessage"]').attr('disabled','disabled'); 
      } 
      else 
      { 
       $('input[name="updateMessage"]').removeAttr('disabled'); 
      } 
     }); 

    }); 

Answer 1

ためthankfull attr('disabled')

とともにborder CSSプロパティは、あなたのCSSには、赤い枠を定義するクラスを追加：

textarea[name=selectMessageForUpdate].disabled { border:5px solid red } 

あなたのJSを：

$(function() { 

     $('input[name="updateMessage"]').attr('disabled','disabled'); 
     $('textarea[name="selectMessageForUpdate"]').keyup(function(){ 
      if($(this).val().length < 3) 
      { 
       $('input[name="updateMessage"]').attr('disabled','disabled'); 
       $(this).addClass('disabled'); // ADD THIS 
      } 
      else 
      { 
       $('input[name="updateMessage"]').removeAttr('disabled'); 
       $(this).removeClass('disabled'); // ADD THIS 
      } 
     }); 

    }); 

彼はテキストエリアではなく、送信ボタンのスタイルを設定したい

http://jsfiddle.net/tmjaF/8/

Answer 2

...私はjsのフィドルを作成し、動作しているようです。指定したマークアップでクラスをテキストエリアに追加し、入力が有効なときにそれを削除するだけです。また、入力が空白以外のものであるかどうかを確認してください。

$(function() { 
    $('input[name=updateMessage]').attr('disabled','disabled'); 
    $('input[name=selectMessageForUpdate]').keyup(function(){ 
     if($('input[name=selectMessageForUpdate]').val().length < 3) 
     { 
      $('input[name=updateMessage]').attr('disabled','disabled'); 
      $('input[name=selectMessageForUpdate]').addClass('someClass'); 
     } 
     else 
     { 
      $('input[name="updateMessage"]').removeAttr('disabled'); 
      $('input[name=selectMessageForUpdate]').removeClass('someClass'); 
     } 
    }); 

}); 

Answer 3

あなたのCSSに追加します。

input.indicated_textfield { border: 2px solid red; } 

は、JavaScriptコードにaddClassとremoveClassの行を追加します。

$(function() { 

    $('input[name="updateMessage"]').prop('disabled', true); 
    $('input[name="selectMessageForUpdate"]').keyup(function(){ 
     if($('input[name="selectMessageForUpdate"]').val().length < 3) 
     { 
      $('input[name="updateMessage"]').prop('disabled', true); 
      $('input[name="selectMessageForUpdate"]').addClass('indicated_textfield'); 
     } 
     else 
     { 
      $('input[name="updateMessage"]').prop('disabled', false); 
      $('input[name="selectMessageForUpdate"]').removeClass('indicated_textfield'); 
     } 
    }); 

});