0

目前我正在開發具有多步表單的Web應用程序。我使用jquery validate插件來驗證表單的每個部分。另外,我想驗證消息作爲一個彈出窗口。爲此,我使用了jquery驗證popover插件。兩個圖書館都服務於我的目的。但是我面臨一個有點怪異的問題。jQuery驗證彈出窗口:移除元素的樣式類

對於必填字段,我希望在模糊事件的紅框中輸入框。當輸入正確時,我想從div元素的樣式中移除該錯誤類。我有這個東西在這裏工作:http://plnkr.co/edit/369WMY7uDdRLNfC8NZrp?p=preview

$(function() { 
    $('#myform').validate({ 
      rules: { 
       personalEmail: { 
        email: true 
       } 
      }, 
      messages: { 
       personalEmail: { 
        email: "Custom Message - Please fill email id in proper format" 
       } 
      }, 
      highlight: function (element) { 
       $(element).closest('div').addClass('has-error'); 
      }, 
      success: function (element) { 
       $(element).closest('div').removeClass('has-error'); 
      }, 
      onsubmit: false, 
      popoverPosition: 'top' 
     }); 
}) 

當我將驗證在彈出插件一切,除了從輸入框的樣式去除誤差類的會好。我不知道爲什麼jquery無法從div元素的樣式中移除錯誤類。我這裏有這個奇怪的工作演示:http://plnkr.co/edit/7iHoypnc1P0x7eiGLtLj?p=preview

$(function() { 
    $('#myform').validate_popover({ 
      rules: { 
       personalEmail: { 
        email: true 
       } 
      }, 
      messages: { 
       personalEmail: { 
        email: "Custom Message - Please fill email id in proper format" 
       } 
      }, 
      highlight: function (element) { 
       $(element).closest('div').addClass('has-error'); 
      }, 
      success: function (element) { 
       $(element).closest('div').removeClass('has-error'); 
      }, 
      onsubmit: false, 
      popoverPosition: 'top' 
     }); 
}) 

我無法弄清楚爲什麼發生這種情況。有沒有什麼內部的驗證彈出式插件?

+0

沒有爲'.validate()'叫popoverPosition方法沒有這樣的選擇。 – Sparky 2014-09-29 14:42:16

回答

1

您需要實現unhighlight

// Code goes here 
$(function() { 
    $('#myform').validate_popover({ 
     rules: { 
      personalEmail: { 
       email: true 
      } 
     }, 
     messages: { 
      personalEmail: { 
       email: "Custom Message - Please fill email id in proper format" 
      } 
     }, 
     highlight: function (element) { 
      $(element).closest('div').addClass('has-error'); 
     }, 
     unhighlight: function (element) { 
      $(element).closest('div').removeClass('has-error'); 
     }, 
     onsubmit: false, 
     popoverPosition: 'top' 
    }); 
}) 

演示:plunker