在菜单中单击幻灯片外部时,我需要清除所有验证错误消息和验证图标。
但是,虽然删除了表单重置和错误消息,但十字标记保持不变。当我在菜单外单击时,我需要删除所有数据。
我正在使用下面的代码重置表单并删除验证消息。
<script>
$('.overlay').on('click', function(){
$("#ohut-innate-form")[0].reset();
$('#navbarSide').removeClass('reveal');
$('.overlay').hide();
$(".error").html('');
$(".error").removeClass("error");
$("ohut-innate-form").validate().resetForm();
});
</script>
这是我的表格
<form class="ohut-innate-form" id="ohut-innate-form" name="ohut-innate-form" method="post">
<span class="form-group">
<label >Email Address</label>
<input type="email" name="emailReg" id="emailReg" class="validate" required>
</span>
<span class="form-group">
<label>Password</label>
<input type="password" name="passwordReg" id="passwordReg" class="validate">
</span>
<span class="form-group">
<label>Confirm Password</label>
<input type="password" name="cpassword" id="cpassword" class="validate">
</span>
<span class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="validate">
</span>
<span class="form-group">
<label>Contact Number</label>
<input type="text" name="contact" id="contact" class="validate">
</span>
<input type="hidden" id="baseUrlReg" value="<?php echo base_url(); ?>">
<button type="submit" id="submit" class="btn btn-block btn-primary mr-2" name="Login">Register</button>
<!-- <a href="#" name="Login" id="register_user" onclick="registerUser()" class="btn btn-block btn-primary mr-2">Register</a> -->
<div class="formrow left" style="visibility: hidden;">
<div class="mainlableContent">
<input class="formtext" type="text" name="mid" id="mid" value="<?php echo $merchantid; ?>" >
<span class="glyphicon glyphicon-remove right errorcross" id="email_cross" style=""></span>
</div>
</div>
</form>
我该如何移除红十字?
不确定这是否是你想要的,但是既然你标记了jQuery,你可以使用$(window).click(function(){ });
来记录元素之外的点击,然后应用一个逻辑。您可以按类,名称或ID来定位元素,具体取决于最方便的内容。
此外,当您退出元素时,是否要清除验证消息并隐藏所有元素的交叉,或仅隐藏您退出的元素?
略读代码,我认为最好的解决方案是在清除所有消息等时使用不同元素上的类。
一个例子是:
$(window).click(function() {
$(".error").html(''); //this is your validation/error message that will be cleared
$('.right errorcross').hide(); //this is your red cross that will be hidden
});
请注意,这不是半伪代码,这意味着您必须调整它以适合您的逻辑,主要是因为我不知道您的类具体做什么,因为在您的问题中没有提供它们的代码。