Question

我想在我的代码中验证不同的输入，但每个输入都会显示错误消息。

        $.each($('.input'), function(){
            if ($('.input').val() == "")
            $(this).css('border' , 'solid red');
            $(this).after('<span class="error">Name fehlt</span>');
            $(this).focus()


        })

`

Answer 1

我认为你应该这样做：

$('.input').each(function () {
    if ($(this).val() == "") {
        $(this).css('border', 'solid red');
        $(this).after('<span class="error">Name fehlt</span>');
        $(this).focus()
    }
})

$.each也会为您做同样的事情。但是我觉得上面的内容更具可读性。但那只是我。

Answer 2

这里有一些事情。 .each无论如何都适用于选择器，所以你可以这样做：

$(".input").each(...)

第二个（这就是您的消息始终显示的原因）您的if语句缺少大括号，因此它只适用于下一个语句：$(this).css('border' , 'solid red');

最后，您可以将jQuery调用链接在一起：

$(".input").each(function() { // Nicer syntax
    // Refer to $(this) to get the value of the CURRENT input
    if($(this).val() == "") { // Don't forget your braces
        $(this).css("border", "solid red")
               // Method chaining
               .after('<span class="error">Name fehlt</span>');
               .focus();
    }
});

Answer 3

猜测你有几个输入字段，也许你想要这样的东西：

validateInput($('.input-name'), 'Name fehlt');

function validateInput(input,errormsg){
    if (input.val() == "") {
        input.css('border', 'solid red');
        input.after('<span class="error">'+errormsg+'</span>');
        input.focus()
    }
}

这意味着当您需要检查另一个时，您可以执行以下操作：

validateInput($('.input-street'),'Strasse fehlt');

进一步的改进可能是将错误消息移动到输入字段的数据属性：

<input type="text" data-required-message="Name fehlt" class="input-name" />

所以你可以通过使用像

这样的东西来使它变得更通用（并通过从Javascript获取内容来清理它）

$(this).data('required-message')

Answer 4

您可以在flags循环中使用each：

var isValid = true;
$(".input").each(function() {
    var $this = $(this);
    if ($this.val() === '' && isValid) {
        $this.css('border', 'solid red')
             .after('<span class="error">Name fehlt</span>')
             .focus();

        isValid = false;
        return false;
    }
});
return isValid;

验证不同的输入

4 个答案: