Question

我正在使用jQuery验证，虽然它验证了确定，我正在尝试的是，如果用户离开表单，然后将其重置回它的初始状态。然而，正在发生的事情是click事件，我将表单div指定为选择器，它正在删除错误消息但不删除输入或表单上的类。但是，如果我使用输入ID，则可以正常工作。

有没有办法可以使用div选择器重置表单，因为我有很多输入要处理。非常感谢

相关的jQuery代码段

$.validator.setDefaults({
    errorClass: 'form_error2',
    //errorElement: 'span',
    //ignore: ":hidden:not(select)",
    errorPlacement: function(error, element) {
        error.insertAfter(element);
   }
});

var validator = $("#addProfile").validate({
    rules: {
        companyName: {
            required: true
        },
        companyAddr1: {
            required: true
        },
        companyAddr3: {
            required: true
        },
        coProfTown: {
            required: true
        },
        coProfPostcode: {
            required: true
        }

    },
    messages: {
        companyName: {
            required: '* required: You must enter your name'
        },
        companyAddr1: {
            required: "* required: You must select a department"
        },
        companyAddr3: {
            required: "* required: You must select a service level"
        },
        coProfTown: {
            required: "* required: You must enter a box for retrieval"
        },
        coProfPostcode: {
            required: "* required: You must enter a box for retrieval"
        }
    },


$('#setHeaderRight').on('click', function() {
  $('#addProfile').removeClass("form_error2");
  validator.resetForm();
});

HTML

<div id="addProfileForm" style="display:none; margin-left:4px;">
    <form id="addProfile" name="addProfile" action="" method="post" class="webform">    
            <label for="companyName">Name:</label><br />
            <input id="companyName" name="companyName" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Company name:" />

            <br />
            <label for="companyAddr1">Address1:</label><br />
            <input id="companyAddr1" name="companyAddr1" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Company Address:" />

            <br />
            <label for="companyAddr2">Address2:</label><br />
            <input id="companyAddr2" name="companyAddr2" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Company Address 2:" />

            <br />
            <label for="companyAddr3">Address3:</label><br />
            <input id="companyAddr3" name="companyAddr3" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Company Address 3:" />

            <br />
            <label for="coProfTown">Town:</label><br />
            <input id="coProfTown" name="coProfTown" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Town:" />

            <br />
            <label for="coProfPostcode">Postcode:</label><br />
            <input id="coProfPostcode" name="coProfPostcode" type="text" class="text ui-widget-content ui-corner-all inputbox AC_item" placeholder="Enter Postcode:" />
            <br />

            <p>
            <input name="submit" class="addprofilesubmit" type="submit" value="Submit">
            </p>
    </form>
 </div>

Answer 1

您似乎遇到语法错误。您忘记正确关闭.validate()方法...

var validator = $("#addProfile").validate({
    rules: {
        // ...
    },
    messages: {
        // ...
    },
});  // <- CLOSING BRACKETS WERE MISSING


$('#setHeaderRight').on('click', function () {
    // $('#addProfile').removeClass("form_error2"); // not needed
    validator.resetForm();
});

您的代码似乎按设计工作......

DEMO：http://jsfiddle.net/61u66zdj/1/

否则，创建一个破坏行为的jsFiddle演示并将其提交给开发人员here at his GitHub page。同时，由于这似乎是您报告的错误，我们在这里没有其他任何可以为您做的事情。

Answer 2

尝试使用

jQuery("#addProfile")[0].reset();

或没有jQuery

document.getElementById("addProfile").reset();

jQuery验证没有从div选择器将表单重置为初始状态

2 个答案: