たとえば、ボタンをクリックして名を言うなど、フォーム入力を検証しています。空の場合は、クラスを次のように変更します
.ValidateError
{
border: 3px solid #ff9600;
background: #ffebe9;
padding: 4px 4px 5px 4px;
color: #404040;
}
テキスト ボックスにフォーカスすると、次のスクリプトを使用して入力ボックスからこのクラスを削除しようとしています。document.ready
$('#divPersonalInfo input').focusin(function () {
$(this).removeClass().addClass('input w220');
});
});
これがhtmlコードです
<div id="divPersonalInfo" class="PersonalInfo">
<h2 id="hPersonal">
Personal Information
</h2>
<div class="FormColumn FloatLeft">
<label>
first name*
</label>
<br />
<input maxlength="100" id="txtFirstName" placeholder="First Name" class="input w220 "/>
</div>
<div class="FormColumn FloatLeft">
<label>
last name*
</label>
<br />
<input maxlength="100" id="txtLastName" placeholder="Last Name" class="input w220"/>
</div>
<div class="FormColumn FloatLeft">
<label>
email*
</label>
<br />
<input maxlength="100" id="txtPersonalEmailId" placeholder="will be seen when sending your web profile/app to your colleagues" class="input w220"/>
</div>
</div>
しかし、クラスはフォーカス時に削除されません