如何重置表单验证警报和错误消息？
问题描述：
我需要帮助。因为我为addRoom，editRoom，editImageRoom使用了1个模式。我只想问一下，如果我关闭/ x模式，是否有办法。数据和错误消息将被刷新/重置。然后当我点击打开模式的其他按钮时。数据将被重置。所以错误和验证将不会在其他模式界面中显示。注*我只使用1个模式。当我点击特定按钮时，我只隐藏其他字段。如何重置表单验证警报和错误消息？
我有3个不同的按钮，但它打开的模式只有一个，我只是隐藏了一些字段。
添加按钮
<a href="javascript:void(0);" onclick="addRoom()" class="btn btn-success"><i class="fa fa-plus"></i> Add a room </a>
修改信息按钮
<a href="javascript:void(0);" onclick="editImage('.$id.')"><img src="../images/rooms/'.$image.'" class="img-thumbnail" width="90px" height="105px"></a>
编辑图像按钮
<a href="javascript:void(0);" onclick="editRoom('.$id.')" class="btn btn-success"><i class="fa fa-edit"></i></a>
这里的模式
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal_form" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<form id="form" name="form" method="post" >
<div class="row">
<div class="summary-errors alert alert-danger alert-dismissible">
<button type="button" class="close" aria-label="Close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<p>Errors list below: </p>
<ul></ul>
</div>
<div id="for_field">
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="room_num" name="room_num" placeholder="Room Number" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<select type="text" class="form-control" id="room_type" name="room_type" placeholder="Room Type">
<option value="">--Choose Room Type--</option>
<?php
$select = "SELECT * FROM room_type";
$qry = mysql_query($select)or die(mysql_query());
while($rows = mysql_fetch_array($qry)){
echo '<option value="'.$rows['room_type_id'].'" alt="'.$rows['room_type_description'].'">'.$rows['room_type_name'].'</option>';
}
?>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="rate" name="rate" placeholder="Rate" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="caps" name="caps" placeholder="Capacity" />
</div>
</div>
</div>
<div id="for_image">
<div class="col-md-12">
<div id="show_image" class="form-group input-group">
</div>
</div>
</div>
<div id="for_upload">
<div class="col-md-12" >
<div class="form-group input-group input-group-file" >
<label class="input-group-addon control-label"><i class="fa fa-image"></i></label>
<input type="text" class="form-control" readonly>
<span class="input-group-btn">
<span class="btn btn-success btn-file">
<i class="icon wb-upload" aria-hidden="true"></i>
<input type="file" id="file" name="file" >
</span>
</span>
</div>
</div>
</div>
<div class="control-group form-group">
<div class="modal-footer">
<input type="hidden" id="submitted" name="submitted" value="1" />
<input type="hidden" id="id" name="id" value="" />
<button type="submit" id="submit" name="submit" onclick="submit()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<span align="left" id="loader"></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
这里是Jquery的
function addRoom()
{
save_method = 'add';
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('#for_field').show();
$('#for_image').hide();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.modal-title').text('Add new room');
}
// edit modal
function editRoom(u)
{
save_method = 'update';
$.ajax({
url: "serverside/get/roomGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 1)
{
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#room_type').val(data.room_type_id);
$('#rate').val(data.room_rate);
$('#caps').val(data.room_capacity);
$('#for_field').show();
$('#for_upload').hide();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Room No: '+data.room_num);
}else{
$('body').html(data.msg);
}
}
});
}
function editImage(u)
{
save_method = 'update-image';
$.ajax({
url: "serverside/get/roomImageGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 2)
{
$('#hide-field').hide();
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#for_field').hide();
$('#for_image').show();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Image');
$('#show_image').html(data.source);
}else{
$('body').html(data.msg);
}
}
});
}
我在代码中没有问题。我只想问如何重置模式，以便1按钮（模态）中的数据不会与按钮（模态）冲突。就这样！谢谢！只是给我更多的好建议谢谢:)
答
如果你试图用jquery ajax调用模式，那么你真的不需要冗长的jQuery显示/隐藏代码。下面是一个例子代码：
的index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav" id="menu">
<li><a href="modal-content.html" data-toggle="modal" data-target="#theModal">Edit/Delete</a>
</li>
</ul>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
模式，content.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
您可以使用三种不同的文件模式或通过Ajax的一切行动调用相同的模式。此外，你可以按照这个链接：Getting Bootstrap's modal content from another page
好吧，先生。对不起。 – dadadaxtr
欢迎来到Stack Overflow。请停止在您的平铺和邮寄中的SHOUTING。所有大写文本都难以阅读和理解，而且这真的很粗鲁和烦人。当你看问题的主要页面时，除了ALL帽子以外，你看不到任何东西，因为这里不适合。这也没有必要说你需要帮助，因为如果你没有，你不会在这里发布。请参考[参考]并阅读[帮助]页面，以更好地了解什么是（和不适合）在这里。谢谢。 （而不是说*对不起*，[编辑]你的文章，并正确地问。） –
对不起！我已经改变它。祝你一天愉快！ – dadadaxtr