2016-05-31 12 views
0

フォームを検証するJavaScriptコードがあります。入力フィールドが空の場合は、入力フィールドに赤い背景を追加する「空」を追加します。クラスを入力から削除する方法

ユーザーがフィールドをクリックしたときにそのクラスを削除する方法はありますか?

私はこれを試しましたが、動作しませんでした。あなたは、ユーザーがこのコントロールをクリックしたときに、クラスを削除するにはフォーカス()メソッドを使用することができます

$('input').bind('blur', function(){   
     $(this).removeClass('empty'); 
    }); 

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    \t 
 
    \t 
 
    \t $('input').bind('blur', function(){ \t \t 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

+0

'$( '入力')を使用していないのはなぜ。'(...)をクリックしますか? –

+0

1)他のイベントハンドラ内の要素にイベントハンドラを追加しないでください。イベントハンドラバインディングを別の場所に移動します。 2) 'bind()'はjQueryで長い間廃止されていました。古いバージョンのjQueryを使用する必要がない場合は、 'on()'を使用します。 3)ぼかしは、ユーザがフィールドを離れるときに発生するイベントであり、フィールドに入るときではない。 'focusin'を試してみてください。 –

+0

'return'の前に*イベントハンドラを追加する必要があります。 return文の後のコードは決して実行されません。 – 4castle

答えて

0

あなたはぼかしに使用して正しい軌道に乗っていたように見えますが、私はフォーカスに使用することをお勧めしても、空の文字列にテキストを変更します。また、あなたのテキストが振る舞うように見える方法は、placeholderのように見えるので、それを使用することを検討したいかもしれませんが、以下のコードはそれを使用しません。

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t $('.form-control').bind('focus', function(){ \t 
 
      $(this).val(''); 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

0

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').bind('focus', function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

0

。これは、マウスとキーボードでも機能します。

$('input[type="text"]').focus(function(){  
    $(this).removeClass('empty').val(''); 
}); 

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').focus(function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

関連する問題