使用jquery.validate進行表單驗證，通過覆蓋錯誤位置來顯示正確和錯誤的圖標

Question

我想要實現演示jQuery驗證插件有here。但我想要解決的是：如果您在頁面加載後單擊提交，插件會顯示帶有交叉符號的驗證信息。如果你輸入了一些東西，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 --> 

驗證腳本：

$().ready(function() { 

// validate signup form on keyup and submit 

    $("#sampleForm").validate({ 

     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
     highlight: function(label) { 
    $(label) 
     .closest('.control-group').removeClass('success').addClass('error'); 
    $('label.error').removeClass('checked'); 
    }, 
    success: function(label) { 
    label.parents(".errormsgwrapper").children('.wrong').addClass('hidden'); 
    label.parents(".errormsgwrapper").children('.right').removeClass('hidden'); 
    label.closest('.control-group').addClass('success'); 

    }, 
     messages: { 
      firstName: { 
        required: "asdfds" 
       }, 
      lastName: "Please enter your lastname" 
     }, 
     errorPlacement: function(error, element) { 
      var errormsgwrapper = element.next(".errormsgwrapper"); 

       errormsgwrapper.children("span.right").addClass('hidden'); 
       errormsgwrapper.children("span.wrong").removeClass('hidden'); 
       error.appendTo(errormsgwrapper.children(".errormessage")); 

     } 

    }); 

    }); 

Answer 1

解決方案是在這裏 我已經找到了解決方案，還包括以下示例代碼。我們可以使用高亮/不高亮來實現這一點。我正在嘗試錯誤位置，當元素上的類從有效更改爲錯誤時不會觸發！人們可以使用類甚至HTML元素展現亮點與unhighlight /隱藏如下圖所示的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> 

我已經包含跨度標記，以便給予適當的造型到圖標或圖像的任何你想顯示驗證信息。 JS代碼如下：

$(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"); 

    } 
    }); 



});