フォームを検証する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>
'$( '入力')を使用していないのはなぜ。'(...)をクリックしますか? –
1)他のイベントハンドラ内の要素にイベントハンドラを追加しないでください。イベントハンドラバインディングを別の場所に移動します。 2) 'bind()'はjQueryで長い間廃止されていました。古いバージョンのjQueryを使用する必要がない場合は、 'on()'を使用します。 3)ぼかしは、ユーザがフィールドを離れるときに発生するイベントであり、フィールドに入るときではない。 'focusin'を試してみてください。 –
'return'の前に*イベントハンドラを追加する必要があります。 return文の後のコードは決して実行されません。 – 4castle