當使用不同的輸入表單（輸入和文本區域）時出現JQuery Validator問題

Question

我真的很感謝JQuery中的表單驗證。我是一個noob，所以如果這很簡單，請提前道歉。

基本上，我想驗證調查表上的表格。在表單中有兩種類型的輸入 - 一種是使用JQuery Range Slider（1到5級）的輸入，另一種是用戶可以在其中輸入想法的textarea輸入框。

所以驗證器插件工作正常，並檢查所有的字段，然後用紅色標記不完整。當用戶填寫了所需的信息時，我的問題就出現了。只要用戶突出顯示框，我可以讓textarea驗證並刪除紅色標籤，但是輸入不會驗證它是否已經驗證過一次並拿起一個錯誤。

我的一些HTML表格：

<tr> 
    <td>Rate how confident you feel about your knowledge on the subject</td> 
    <td class="slider-holder"> 
     <div class="slider num"></div> 
     <input class="sliderValue validateFormClass" type="text" readonly="true" name="fb_33" required /> 
    </td> 
</tr> 
<tr> 
    <td>List three important concepts or ideas that you learned in this course</td> 
    <td class="slider-holder"> 
     <textarea name="fb_34" class="textAreaFBSurvey validateFormClass" required></textarea> 
    </td> 
</tr> 

我的jQuery驗證碼：

$(document).ready(function() { 
    $('.form-required').validate({ 
     onclick: false, 
     focusInvalid: false, 
     focusCleanup: true, 
     errorPlacement: function (error, element) { 
      $('.error-message').removeClass('hidden'); 
      $(element).closest('tr').addClass('error'); 
     }, 
     onfocusout: function (error, element) { 
      $('textarea.valid').closest('tr').removeClass('error'); 
     }, 
     submitHandler:function (form) { 
      form.submit(); 
     }, 
    }); 
}); 

Fiddle Demo

我想實現的是，應該在用戶提交一個不完整表格中，缺少的字段將被標記爲紅色。只要該用戶填寫剩餘的字段，無論是textarea還是輸入，「錯誤」類都將被刪除，而無需單擊「提交」按鈕。這使得它更具視覺吸引力，並且更容易理解所有字段都是完整的。

我已經試了兩天，現在還沒有弄清楚，所以任何方向或簡單的「這是不可能的」將不勝感激。

非常感謝

Answer 1

所以我終於想出瞭如何使這段代碼工作。原來問題不在於Validator插件，而在於rangeSlider插件。話雖如此，斯帕基，你的建議確實有幫助，非常感謝幫助。

對於任何可能有類似問題的人，我已經在下面列出了我的最終JQuery代碼，包括rangeSlider和Validator。 （注意：JSFiddle仍然不起作用）。

   $(document).ready(function() { 
       var cellWidth = 0; 
       var newWidth = 0; 
       $(".radio-header").each(function() { 
        var newWidth = $(this).width(); 
        if (cellWidth < newWidth) 
        { 
         cellWidth = newWidth; 
        } 
       }); 
       $(".radio-header").width(cellWidth); 

       $(".num").slider({ 
        range: "max", 
        min: 1, 
        max: 5, 
        value: 0, 
        slide: function(event, ui) { 
         $(this).siblings(":text").val(ui.value); 
         $(this).closest('tr').removeClass('error'); 
        } 
       }); 
      }); 

      $(document).ready(function() { 
       $('.form-required').validate({ 
        focusInvalid: false, 
        focusCleanup: true, 
        errorClass: "hidden", 
        highlight: function(element, error, errorClass) { 
         $(element).closest('tr').addClass('error'); 
         $('.error-message').removeClass('hidden'); 
        }, 
        unhighlight: function(element, error, errorClass) { 
         $(element).closest('tr').removeClass('error'); 
        }, 
       }); 
       $.validator.addClassRules({ 
        sliderValue: { 
         required: true, 
         digits: true, 
        }, 
       }); 
      }); 

Answer 2

，而不是

onfocusout 

使用

onblur 

http://www.w3schools.com/jsref/event_onblur.asp

Answer 3

你的代碼是有問題的......

errorPlacement: function (error, element) { 
    $('.error-message').removeClass('hidden'); 
    $(element).closest('tr').addClass('error'); 
}, 
onfocusout: function (error, element) { 
    $('textarea.valid').closest('tr').removeClass('error'); 
}, 

• errorPlacement在錯誤被觸發，它僅用於錯誤消息的放置，不用於切換類。

• onfocusout每次現場失去焦點（後最初提交）被觸發，它僅用於觸發驗證。這也不適合添加/刪除類。

更適當選項切換你的類highlight和unhighlight。

更接近於此。

highlight: function(element, errorClass, validClass) { 
    $(element).closest('tr').addClass(errorClass); 
}, 
unhighlight: function(element, errorClass, validClass) { 
    $(element).closest('tr').removeClass(errorClass); 
}, 

您可以在這些函數中使用條件限制某些操作到某些元素。

---

問題與your jsFiddle demo：

• 您沒有任何<form></form>標籤。沒有form標籤，jQuery Validate插件將無法運行。

• 您已經包含jQuery Validate插件的1.7版本，這太舊了，以至於無法使用jQuery v2。 The latest version of this plugin is 1.13.1。

• 您沒有提交按鈕，所以沒有什麼可以在窗體上觸發驗證。

• 您的textinput是readonly，同時它也被標記爲required。用戶將永遠無法在此處輸入數據，因此不需要使其成爲required。

• 根據我上面的回答，不正確地使用了errorPlacement和onfocusout。

• 如果僅包含默認操作，則不需要submitHandler選項。換句話說，因爲form.submit()是默認情況下已經發生的，所以只需要省略submitHandler。