注意:这是一个jQuery编码练习,我不允许使用插件或其他模块。
我有一个简单的表单验证脚本。当用户输入数据并且它为空时,将显示相应的错误。
当用户键入必填字段并再次提交表单时,我希望错误消息在不再为空时消失,如果其他字段仍为空则显示相应的错误。
我尝试了以下操作,输入所需的表单字段并重新提交后,错误仍然显示。
HTML
<form id="myForm">
<input type="text" placeholder="Email" id="email" name="email">
<span class="error">Email not entered</span><br />
<input type="password" placeholder="Password" id="pword" name="pword">
<span class="error">Password not entered</span><br />
<input type="text" placeholder="First Name" id="fname" name="fname">
<span class="error">First Name not entered</span><br />
<input type="text" placeholder="Last Name" id="lname" name="lname">
<span class="error">Last Name not entered</span><br />
<input type="submit" value="Submit">
</form>
CSS
.error {
display: none;
}
.error_show {
display: inline-block;
color: red;
margin-bottom: 1em;
}
的jQuery
// jQuery form validation
$(document).ready(function(){
// remove class from previous data entry
$('#myform span').removeClass('error_show');
// field mapping
var form_fields = {
'email' : 'email',
'pword' : 'password',
'fname' : 'first name',
'lname' : 'last name'
};
// ajax data
var data = {};
// make sure form fields were entered
$('#myForm').on('submit', function(e){
for (var field in form_fields) {
if (!$('#' + field).val()) {
$('#' + field).next().addClass('error_show');
} else if ($('#' + field).val()) {
data[field] = $('#' + field).val();
}
}
return false;
});
});
答案 0 :(得分:1)
只需将removeClass()
添加到验证功能的this.firstNameTextBox.Leave += new System.EventHandl(this.firstNameTextBox_Leave);
private void firstNameTextBox_Leave(object sender, EventArgs e)
{
MessageBox.Show("hello");
//second time call this event for call some method or propmt messagebox onleave of CaseingTxtBox .
}
分支:
else
现在,当字段有值时,类将被删除。