单击表单重置按钮时，如何清除 Jquery Validation 错误消息？答案

【问题标题】：On Click of Form Reset button , how to clear Jquery Validaton error messages?单击表单重置按钮时，如何清除 Jquery Validation 错误消息？
【发布时间】：2016-10-27 18:30:08
【问题描述】：

我正在结合使用 Jquery 和 bootstrap。我有一个包含 2 个组件的表单，一个文本输入和一个文件输入。

问题 1：

最初点击提交按钮而不在表单中做任何事情并且它不会在单击 Reset Button 时清除 jquery Validation 错误消息。

问题 2：

在文本输入下输入一些描述并上传任何图片，点击RESET按钮不会清除输入类型文件值。

这是我的js代码

jQuery(document).ready(function(){
  $('#pacinsertform').validate(
    {
      rules:
      {
        previewpic:
        {
          required: true
        },
        description:
        {
          required: true
        }
      },
      messages:
      {
        previewpic:
        {
          required: "Upload Image required",
        },
        description:
        {
          required: "description  required",
        }
      },
      highlight: function(element)
      {
        $(element).parent().addClass('error')
      },
      unhighlight: function(element)
      {
        $(element).parent().removeClass('error')
      },
      submitHandler: function(event, validator)
      {
        if ($("#pacinsertform").valid())
        {
          ajaxInsertPac();
          return false;
        }
      }
    });

});
$("#previewpic").change(function()
                        {
  $("#previewpic").blur().focus();
});



function ajaxInsertPac()
{
  alert('ajax call heer');
  return false;
}
$(document).on("click", ".removepic", function(event)
               {
  $("#previewpic").attr('name', 'previewpic');
});
$(document).on("click", ".resetform", function(event)
               {
  $("#description").val('');
  $("#previewpic").val('');
});

这是我的小提琴 http://jsfiddle.net/Luf0ks9b/48/

【问题讨论】：

点击取消/重置按钮，你应该调用resetForm：jqueryvalidation.org/Validator.resetForm，对我来说，它清除了描述......
谢谢，我已经试过了，但它不起作用，这是它的小提琴jsfiddle.net/Luf0ks9b/50

标签： jquery

【解决方案1】：

对于您的问题 1，您可以使用：

$("#pacinsertform").validate().resetForm();

用于重置表单。

对于您的问题 2，您可以触发触发单击删除按钮，如下所示：

$(".removepic").trigger( "click" );

DEMO

【讨论】：

【解决方案2】：

要在重置时删除 jquery 验证消息，请使用：$("label.error").html('');

重置按钮上的文件上传控制：$(".removepic").trigger('click');

请查看工作演示：http://jsfiddle.net/Luf0ks9b/53/

【讨论】：