Javascript 使用图像验证输入文本框

我有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);
            }
 });

var无效=“”；
$（'.btn'）。单击（函数（）{
变量输入=$（“：输入”）.filter（函数（）{
返回此值。值==“”；
});
if（输入。长度）{
$（输入）.css（'border-color'，'red'）。之后（无效）；
console.log（输入.长度）；
}
});

以下是一些输入文本框，但不是全部：

<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" />

名字：
姓氏：
电邮地址：
公司：

试试这个：

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

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

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

现在，

：输入有点宽，因此效率低。因此，最好说：

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

<> > <>代码>容器/<代码>当然是所有输入的容器。
 请考虑使用<强> jQuery验证> /Sturn>，您可以看到示例和文档
您可以发布完整的HTML表单吗？该页面是以包含表单的形式设置的。这是我使用validateA的第一个选择。表单中的表单不是有效的html。浏览器渲染引擎将破坏该结构。对不起@TroyBryant，哪个页面设置为包含表单中的表单？是的。“我正要问这个问题。”迪弗里塔斯说。如果您还没有解决您的问题，请查看我关于css
border
参数声明的最新编辑。仍然产生相同的结果。不知道如何删除边框颜色，但仍将“X”放在文本框后。确定。您的意思是没有应用边框颜色，但img是？如果是这样，那么请尝试我编辑的当前
{}
样式。如果上面的
.css（）
不起作用，那么肯定会被其他样式声明覆盖。检查浏览器控制台中的文本框可能会有所帮助。就在我的头顶上，通过尝试红色来检查这一点！重要提示“

取代了“红色””。

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