在jquery validate插件中显示错误无法正常工作

Question

我有一个表单，如果发生任何错误，则会在表单上方集中显示错误，并且还会在相应的元素中显示错误。但是当我输入输入字段时，错误将从元素中删除，但在表单上方仍会显示错误标题，并且不会显示错误。

在图片中，您可以找到所面临问题的更好描述。

请帮助我。

$('#dsPatientForm').validate({
errorElement: 'span',
rules: {
        firstname: {
            required: true,
            lettersonly: true,
        },
        lastname: {
            required: true,
            lettersonly: true,
        },
        email: {
            required: true,

        },
        country: {
            required: true
        },
        zip: {
            required: true,
            digits: true
        },
        terms: {
             required : true
        }
},
messages: {
        firstname: {
            required: "Please enter firstname",
        },
        lastname: {
            required: "Please enter lastname",
        },
        email: {
            required: "Please enter the email",

        },
        country: {
            required: "Please select country"
        },
        zip: {
            required: "Please enter the postal code",
            digits: "Enter only digits"
        },
        terms: {
           required : "Please accept the terms"
      }
},//end messages
errorPlacement: function(error, element) {
       if (element.attr("name") == "country" ){
            error.insertBefore(element.parent().parent('.form-group'));
       }else{
           error.insertBefore(element.parent('.form-group'));
       }


},//end errorPlacement
showErrors: function(errorMap, errorList) {
        var summary = "Please correct the following errors: <br/>";
        $.each(errorList, function() { summary += " - " + this.message + "
<br/>"; });
        $("#sp").empty();
        $("#sp").html(summary);
        $("#sp").addClass("error-top mb15");


    this.defaultShowErrors();

},
highlight: function(element) {
     $(element).removeClass("error");
     $(element).addClass("err");
},
unhighlight: function(element) {
     $(element).removeClass("err");
}
});