Question

我使用jquery进行字段验证，以检查它是否为空。如果是，我想显示一条消息然后重新聚焦在该字段上，以便用户可以输入一些数据。代码：


$('#fieldId').blur(function() {
    var fieldValue = $(this).val();
    if(fieldValue == null || fieldValue.length == 0) {
        $(this).addClass('error');
        // show error message
        $('#errorDivId')
            .text('You must enter a value in this field')
            .show();
        $(this).focus();
    }
    else {
        if ($(this).is('.error')) {
            $(this.removeClass('error');
            $('#errorDivId').hide()
        }
    }
});

它有点工作，但它将光标移动到下一个字段，而不是我重新聚焦的字段。

Answer 1

你可以试试这个：

$('#fieldId').blur(function(evt) {
  var fieldValue = $(this).val();
  if(fieldValue == null || fieldValue.length == 0) {
    $(this).addClass('error');
    // show error message
    $('#errorDivId')
        .text('You must enter a value in this field')
        .show();
    this.focus();
    evt.preventDefault();
  }
  else {
    if ($(this).is('.error')) {
        $(this.removeClass('error');
        $('#errorDivId').hide()
    }
  }
});

然而，这可能无法完全解决问题，因为某些浏览器可能会混淆。作为替代方案，将“焦点”调用作为超时包装并在当前事件结束后运行它：

    var self = this;
    setTimeout(function() { self.focus(); }, 1);

这是一种黑客攻击，但也应该有效。

编辑 - @Gus是关于调用哪个“focus（）”

Answer 2

焦点更改期间触发blur事件（因为您正在验证的控件失去焦点）。如果您在焦点已经改变时尝试改变焦点，这可能会导致奇怪的行为。而不是blur，请尝试将验证附加到change事件。

此外，无需调用jQuery版焦点：$(this).focus()，您只需调用this.focus()。

$('#fieldId').change(function() {
    var fieldValue = $(this).val(); 
    if(fieldValue == null || fieldValue.length == 0) {
        $(this).addClass('error');
        // show error message
        $('#errorDivId').text('You must enter a value in this field').show(); 
        this.focus(); 
    } else {
        if ($(this).is('.error')) { 
            $(this).removeClass('error');
            $('#errorDivId').hide() 
        } 
    }
});

JQuery验证问题

2 个答案: