如何使用jQuery验证整个表单

Question

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

目录

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