Question

我在模态中使用了bootstrap验证器。验证器在后续的表单访问中保留。例如，如果执行以下操作

访问表单输入一些有效值并提交表单。

再次访问该表单，该字段的颜色仍保持绿色，因为我在之前的表单提交中输入了有效条目

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Add new Node</h4>
  </div>
   <div class="modal-body">
    <div class="modal-body">
        <form role="form" id="addNodeForm">
          <div class="form-group">
            <label for="nodename" class="control-label">Node Name</label>
            <input type="text" name="nodename" class="form-control" id="nodename" required>
          </div>

        </form>
   </div>
  <!--  <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <div id="thanks"></div>
    </div> -->
 </div>
 <div class="modal-footer">
  <button type="button" id="add-close" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="button" id="add-save" class="btn btn-primary">Save changes</button>
 </div>
</div>

        $('#myModal').on('hidden.bs.modal', function(){
            $(this).removeData('bs.modal');
            $('#nodename').val("");
            $('#addNodeForm').bootstrapValidator('resetForm', true);
        });

        $('#myModal').on('show.bs.modal', function () {
             // $('#addNodeForm').bootstrapValidator('resetForm', true);
            $(this).removeData('bs.modal');
            $('#addNodeForm').bootstrapValidator('resetForm', true);
              $.ajax(
                     {
                         url: "node/getnodelist",
                         type: "GET",
                         success:function(text) 
                         {
                             alert(text);
                            nodelist = text;
                         },
                         error: function(jqXHR, textStatus, errorThrown) 
                         {
                             //if fails      
                         }
                     });
            });

        $('#addNodeForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                nodename: {
                    validators: {
                        notEmpty: {
                            message: 'Function name is required'
                        }
                    }
                }
            }
        });

Answer 1

当模态完成对用户隐藏时，hidden.bs.modal事件被触发，因此表单将被隐藏而BoostarpValidator默认不会处理或验证隐藏字段。

因此，为了在隐藏模态时重置表单，您应该添加：

excluded: ':disabled'

到您的JS代码。

实例：http://jsfiddle.net/Arkni/ndpv76bk/

参考：

excluded docs：http://bootstrapvalidator.com/settings/#form-excluded

修改

在添加excluded选项后，您在表单上初始化bootstrapValidator应如下所示：

$('#addNodeForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, excluded: ':disabled', // <=== Adding the 'excluded' option fields: { nodename: { validators: { notEmpty: { message: 'Function name is required' } } } } });

Answer 2

请尝试以下代码：

$('#contactform').bootstrapValidator('resetForm', true);

Answer 3

尝试以下代码，在哪个变电站要重置表格..

 $('#addNodeForm').trigger("reset");

Answer 4

当模式将被隐藏时重置表单

$("#addUserModal").on('hide.bs.modal', function(){
  $("#userForm")[0].reset();
  $('#userForm').bootstrapValidator('resetForm', true);
});

Answer 5

reset（）函数将重置您的表单而不是引导程序验证错误。

所以我们需要做的只是告诉表单您的表单是新鲜的，请从表单中已验证。就像下面一样。

document.getElementsByClassName('needs-validation')[0].classList.remove("was-validated")

模态的Bootstrap验证器不会重置Form

5 个答案: