如何突出顯示onChange上的無效輸入字段？

我想知道如何突出無效輸入字段onChange？目前，我的表單只檢查輸入字段是否滿足最小要求（如長度），這很好，但我希望使用邊框突出顯示問題的無效字段。如果字段被驗證，onChange，它應該回到其正常狀態。如何突出顯示onChange上的無效輸入字段？

$(document).ready(function() { 
     $('form #response2').hide(); 
     $('.button2').click(function(e) { 
      e.preventDefault(); 
      var valid = ''; 
      var required = ' is required'; 
      var first = $('form #first').val(); 
      var last = $('form #last').val(); 
      var email = $('form #email').val(); 
      var tempt = $('form #tempt').val(); 
      var tempt2 = $('form #tempt2').val(); 

      if (first = '' || first.length <= 1) { 
       valid += '<p>Your first name' + required + '</p>'; 
      } 

      if (last = '' || last.length <= 1) { 
       valid += '<p>Your last name' + required + '</p>'; 
      } 

      if (!email.match(/^([a-z0-9._-][email protected][a-z0-9._-]+\.[a-z]{2,4}$)/i)) { 
       valid += '<p>Your e-mail address' + required + '</p>'; 
      } 

      if (tempt != 'http://') { 
       valid += '<p>We can\'t allow spam bots.</p>'; 
      } 

      if (tempt2 != '') { 
       valid += '<p>A human user' + required + '</p>'; 
      } 

      if (valid != '') { 
       $('form #response2').removeClass().addClass('error2') 
        .html('' +valid).fadeIn('fast'); 
      } 

      else { 
       $('form #response2').removeClass().addClass('processing2').html('<p style="top:0px; left:0px; text-align:center; line-height:1.5em;">Please wait while we process your information...</p>').fadeIn('fast'); 

       var formData = $('form').serialize(); 
       submitForm(formData); 
      } 

     }); 

    });

來源

2014-11-02 Marlon

以下是您可以使用的代碼。

$(document).ready(function(){ 
$('input[type="text"]').keyup(function(){ 
    var value = $(this).val(); 
    if(value=='' || value.length<=1) { 
    $(this).css('border','1px solid red'); 
    } 
    else { 
    $(this).css('border','none'); 
    } 
}); 
});

此代碼將突出窗體上的所有輸入文本字段時，它是空的或只有一個字符。這個代碼觸發鍵盤按鍵事件意味着當你按下並釋放鍵時，按鍵事件將被觸發，並且這個代碼將被執行。希望能幫助到你。

來源

2014-11-02 21:45:13

謝謝，devdesign。 – Marlon 2014-11-02 22:05:59

如果我跟着你正確的，所有你需要：

$('#last, #email, #tempt, #tempt2').change(function() { 
    // Put validation logic here using $(this) 
});

有一件事，我建議是驗證邏輯包裝成可以從兩個change和click回調調用一個函數。

來源

2014-11-02 21:47:38 beautifulcoder

如果您想要確保捕獲所有更改，您需要按照以下步驟捕獲密鑰，綁定，剪切，複製和粘貼事件。

$('.your-input1, .your-input2, ...').on("keyup bind cut copy paste", function() 
    { 
     ...your code... 
    });

從我的經驗來看，'change'事件在所有瀏覽器中的作用不一樣。不知何故，當某些事情發生變化時，它不會總是被調用。

來源

2014-11-02 22:04:09

如何突出顯示onChange上的無效輸入字段？

回答

相關問題