如何使用jQuery驗證字段爲空時顯示錯誤onblur？

我正在使用jQuery Validate來驗證表單。 onfocusout參數設置爲true，但它表示：如何使用jQuery驗證字段爲空時顯示錯誤onblur？

驗證模糊的元素（複選框/單選按鈕除外）。如果沒有輸入任何內容，則跳過所有規則，除非該字段已被標記爲無效。

我無法找到它，所以如果用戶在該字段內部單擊並且沒有輸入任何內容，則會顯示錯誤消息，並且該字段將以紅色突出顯示。

如果字段爲空，它將顯示錯誤的唯一方法是如果我輸入文本，然後將其刪除。我需要它來顯示錯誤，如果我點擊裏面，然後點擊而不輸入任何東西。

有人能告訴我如何做到這一點？

2011-04-09 Cofey

添加class"required"到您的輸入，所以它看起來像

<input type="text" class="required" />

這將使所需要的領域和模糊，如果字段留空會觸發一個錯誤。

來源

2011-04-09 06:40:12 Hussein

嗯，我已經在輸入標籤中定義了所需的類，但是如果該字段爲空，錯誤仍然不會顯示。還有其他想法嗎？ – Cofey 2011-04-09 06:47:39

有關錯誤未顯示onblur的示例，請參見插件演示頁面，如果在輸入字段具有「錯誤」類時該字段爲空：http://jquery.bassistance.de/validate/demo/ – Cofey 2011-04-09 15:37:02

試試這個：

$('input').blur(function(){ 
    if($(this).val() == ''){ 
     alert('Enter something');//here you call your desired process 
    } 
});

來源

2011-04-09 06:51:13 thecodeparadox

通常，這將是一個很好的解決方案，但是我在jQuery Validate中定義了許多不同的自定義錯誤消息。因此，它需要在插件內部工作。 – Cofey 2011-04-09 06:54:57

我來到了這個職位，我遇到了同樣的問題後填寫，然後清除所需的表單字段。我用一個例子合併Twitter的引導形式標記了這裏找到jquery.validate.js：http://alittlecode.com/jquery-form-validation-with-styles-from-twitter-bootstrap/

我解決它使用下面的代碼：

onfocusout: function(label) { 
     if($(label).val() == ''){ 
      $(label).closest('.control-group').removeClass('success'); 
     } 
    }

這裏的上下文中的完整的腳本：

$(document).ready(function() { 
    $('#contact_form').validate({ 
    rules: { 
     name: { 
     minlength: 2, 
     required: true 
     }, 
     email: { 
     required: true, 
     email: true 
     }, 
     message: { 
     minlength: 2, 
     required: true 
     } 
    }, 
    onfocusout: function(label) { 
     if($(label).val() == ''){ 
      $(label).closest('.control-group').removeClass('success'); 
     } 
    }, 
    highlight: function(label) { 
     $(label).closest('.control-group').addClass('error'); 
    }, 
    success: function(label) { 
     label 
      .text('OK!').addClass('valid') 
      .closest('.control-group').addClass('success'); 
    }, 
    submitHandler: function(form) { 
      $(form).ajaxSubmit({ 
       target: '#success', 
       success: function() { 
        $('#contact_form_wrapper').hide(); 
        $('#success').html('<h3>Thank you for your enquiry</h3><p class="intro-text">We will endeavour to respond to your message within 72 hours.</p>').fadeIn('slow'); 
       } 
      });   
     } 
    }); 
});

來源

2012-05-02 23:23:29 mikefosbrook

這個問題的插件有一個專門用於在一個名爲'元素'的特定元素上立即運行驗證的功能。你可以在onfocusout函數中使用它來強制驗證該特定元素。

實施例：

$('form').validate({ 
    onfocusout: function(e) { 
     this.element(e); 
    } 
});

見的jsfiddle demo。

來源

2012-06-11 15:54:09 tigerFinch

如何使用jQuery驗證字段爲空時顯示錯誤onblur？

回答

相關問題