如何突出显示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上的无效输入字段？

回答

相关问题