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

标签 javascript jquery html

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

最佳答案

试试这个:

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

关于javascript - 使用图像验证输入文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31009729/

相关文章:

javascript - POST 正文未定义导致 Node.js 服务器关闭

javascript - 找出数组是否包含javascript中的算术级数

javascript - 如何检测当前的iframe url?

javascript - 如何使用 javascript 遍历这个 json 数组

jquery - 使用特定选择器通过 jquery 重置表单

javascript - 如何暂停和恢复用 vanilla javascript 编写的简单贪吃蛇游戏?

html - 创建一个内部有文字的边框

javascript - 整个HTML页面的大小(当高度为100%时)

javascript - 每次点击同一元素时调用后渲染

javascript - Ajax 响应仅工作一次 - 使用 PHP 的购物车