How to validate whole form using jQuery

Question

I know there are numbers of answers available for this question but I want to validate whole form with dynamic input fields coming from database like 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');
            }
        });
    });
});

I will also tried keyup instead of input but not working. This line of code below is working fine (tested with other condition).

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

This code isn't working, can anyone tell me what is wrong with this code.

"This code isn't working" What is not working? Sounds like you do not bind events after the dynamic elements are added. — epascarello, Sep 02 '20 at 13:41
https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Sep 02 '20 at 13:42
You could use jquery validation plugin: https://jqueryvalidation.org/ — Pete, Sep 02 '20 at 13:48

Chaz · Accepted Answer · 2020-09-02T14:21:36.103

Does 'change' work for you?.
Like this:
Of course remove the console.log() statements and change the if condition before you use this anywhere.
It's just for demonstration.

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

This also works with "keyup" but then of course fires everytime the user releases a keypress: https://jsfiddle.net/Chazlol/1co0y4ju/16/

Well your answer is working but my has been solved by `focusout` event — Amaan warsi, Sep 02 '20 at 14:22

How to validate whole form using jQuery

1 Answers1