如何使用 jQuery 验证整个表单

Question

我知道这个问题有很多可用的答案，但我想使用来自数据库的动态输入字段（如 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');

这段代码不起作用，谁能告诉我这段代码有什么问题。

Answer 1

'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');
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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