使用jquery.validate进行表单验证，通过覆盖errorplacement来显示正确和错误的图标

我正在尝试实现jquery验证插件的演示。但我想解决的是：如果在页面加载后单击submit，插件会显示带有交叉符号的验证MSG。如果你输入了什么，消息会变成选中标记的图像。但是，如果再次删除文本，它将显示验证消息，但带有复选标记，而不是交叉图像。我想为我的网站更正此问题：

我正在使用jquery.validate进行客户端验证。为了显示带有验证消息的右图标和十字图标，我使用了icomoons图标集（css方法）。我在下面添加了我的html和JS脚本。我试图使用errorplacement来更改默认容器，但是如果您在文本框中输入一些内容，然后再次删除它，则从十字到右侧的图标不会更改。消息出现，但图标不变

此外，我还想学习编写jquery.validate的任何更有效的方法，以实现我在这里所做的图标方法

此处的HTML部分：

 <!-- First step - form section starts here -->
         <form class="form-horizontal" id="sampleForm">
            <div class="control-group">
              <label class="control-label" for="firstName">First Name:</label>
              <div class="controls">
                <input type="text" id="firstName" name="firstName" placeholder="Peter">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="lastName">Last Name:</label>
              <div class="controls">
                <input type="text" id="lastName" name="lastName" placeholder="Parker">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <div class="controls pull-right">
                <button type="submit" class="btn">Next &raquo;</button>
              </div>
            </div>
        </form>
        <hr>
        <!-- /form -->

---

解决方案就在这里 我已经找到了解决方案，还包括下面的示例代码。我们可以使用高光/非高光来实现这一点。我尝试了errorplacement，当元素上的类从valid变为error时，它不会触发！！可以使用类甚至html元素来显示/隐藏高亮显示和取消高亮显示，如下面的js代码所示

<div id="signupwrap">
        <form id="signupform" autocomplete="off" method="get" action="">
        <div class="question">
            <label for="firstname">First Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="firstname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
        <br /><br />
        <div class="question">
            <label for="lastname">Last Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="lastname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
         <br /><br />

            <input id="signupsubmit" name="signup" type="submit" value="Signup" />


          </table>
      </form>
  </div>

---

解决方案就在这里 我已经找到了解决方案，还包括下面的示例代码。我们可以使用高光/非高光来实现这一点。我尝试了errorplacement，当元素上的类从valid变为error时，它不会触发！！可以使用类甚至html元素来显示/隐藏高亮显示和取消高亮显示，如下面的js代码所示

<div id="signupwrap">
        <form id="signupform" autocomplete="off" method="get" action="">
        <div class="question">
            <label for="firstname">First Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="firstname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
        <br /><br />
        <div class="question">
            <label for="lastname">Last Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="lastname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
         <br /><br />

            <input id="signupsubmit" name="signup" type="submit" value="Signup" />


          </table>
      </form>
  </div>

---

这不太管用。当您正确填写表单字段时，错误应该立即消失-不是在模糊上。我的要求是在模糊上，您可以使用可用的事件来处理您的要求。这不太有效。当您正确填写表单字段时，错误应该立即消失-不是在模糊上。我的要求是在模糊上，您可以使用可用的事件来处理您的要求。

$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({

    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname"
    },

    errorPlacement: function(error, element) {
            error.appendTo(element.next('.errormessagewrapper').children());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
        alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {

    },
    highlight: function(element, errorClass, validClass) {


   $(element).next('.errormessagewrapper').children('span').addClass("icon-cancel").removeClass("icon-checkmark");

  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).next('.errormessagewrapper').children('span').removeClass("icon-cancel").addClass("icon-checkmark");

  }
    });



});