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是所有输入的容器。

Answer 2

请考虑使用 jquery验证，您可以看到示例here和文档here

使用图像验证输入文本框

2 个答案: