如何使用jQuery验证表单

c90pui9n 于 2024-01-07 发布在 jQuery

关注(0)|答案(1)|浏览(167)

我知道这个问题有很多答案，但我想用来自Google Forms这样的数据库的动态输入字段来验证整个表单。

Html

<div class="rs_card"><span style="font-size: 1em;">How to create website like programmer?</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>
<div class="rs_card"><span style="font-size: 1em;">How to create art like painter?</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>
<div class="rs_card"><span style="font-size: 1em;">How to create transition effect like materialize css</span><div class="col-3" style="margin-top: 5%"><input type="text" placeholder="Placeholder Text" class="input_field required"><span class="focus-border"></span></div></div>

字符串

JS

$(document).ready(function(){    
    $('input.required').each(function(){
        $(this).on('input', function(){
            if($(this).val() == ''){
                $(this).parents('div.rs_card').addClass('invalid_card');
            } else{
                $(this).parents('div.rs_card').removeClass('invalid_card');
            }
        });
    });
});

型
我也尝试了keyup而不是input，但不起作用。下面这行代码工作正常（在其他条件下测试）。

$(this).parents('div.rs_card').addClass('invalid_card');

型
这段代码不工作，谁能告诉我这段代码有什么问题？

jquery

来源：https://stackoverflow.com/questions/63706799/how-to-validate-form-using-jquery

1条答案

按热度按时间

guykilcj1#

'change'对你有用吗？
就像这样：
当然，在任何地方使用它之前，请删除console.log()语句并更改if条件。
只是为了示范。

$(document).ready(function(){    
    $('input.required').each(function(){
        $(this).on('change', function(){
            if($(this).val() == '123'){
                    console.log("if");
                $(this).parents('div.rs_card').addClass('invalid_card');
            } else{
                console.log("else");
                $(this).parents('div.rs_card').removeClass('invalid_card');
            }
        });
    });
});

个字符
这也适用于“keyup”，但当然每次用户释放按键时都会触发：https://jsfiddle.net/Chazlol/1co0y4ju/16/

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

如何使用jQuery验证表单

1条答案

相关问题

热门标签

最新问答