javascript - 使用图像验证输入文本框

Question

我有 13 个输入文本框，只是为了收集用户信息。我试图添加一点逻辑，当用户单击“下一步”按钮时，检查输入字段是否为空，如果是，则在文本框后面放置一个 X 图像。我要起床的地方是，如果我将文本放入框中，那么它不会用红色勾勒出框的轮廓，但仍会在表单后面放置一个 X。

我尝试过使用 $.each() 和 $.filter()

这是js:

var invalid =  '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
    var inputs = $(":input").filter(function () {
    return this.value === "";
     });

    if (inputs.length) {
        $(inputs).css('border-color', 'red').after(invalid);
        console.log(inputs.length);
            }
 });

以下是一些输入文本框，并非全部:

<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" /> 
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" /> 
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />

Answer 1

试试这个:

var invalid =  '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {

    $(":input").each(function () {
        if($(this).val() == '' ){

            $(this).css({borderColor: 'red'}).after(invalid);
        }
    });
});

请注意，如果您之前没有设置其他边框 css 参数，则 color 可能不起作用。所以这个模式可以在这种情况下解决这个问题:

.css({border: '1px solid red'})

现在，:input 有点宽泛，因此效率低下。因此，最好说:

$(':text', '#container').each(...

其中#container 当然是所有输入的容器。