时间戳

首页 > 解决方案 > 如何使用 jQuery 验证整个表单

javascript - 如何使用 jQuery 验证整个表单

问题描述

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

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

标签： javascripthtmljqueryvalidation

解决方案

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

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

推荐阅读