Question

我想知道如何突出显示无效输入字段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._-]+@[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);
            }

        });

    });

Answer 1

如果我正确地按照您的要求，您只需要：

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

我建议的一件事是将验证逻辑包装到您可以从change和click回调中调用的函数中。

Answer 2

如果您想确保捕获所有更改，则需要捕获如下的keyup，bind，cut，copy和paste事件。

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

＆＃39;变化＆＃39;根据我的经验，事件在所有浏览器中的工作方式不同。不知何故，当事情发生变化时，它总是不会被召唤。

Answer 3

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

$(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');
  }
 });
});

当代码为空或只有一个字符时，此代码将突出显示表单上的所有输入文本字段。此代码触发键盘按键事件意味着当您按下并释放按键时，将启动按键事件并执行此代码。希望它有所帮助。

如何突出显示无效输入字段onChange？

3 个答案: