How to validate form using jQuery

Question

I know there are a number of answers available for this question but I want to validate the whole form with dynamic input fields coming from a 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 also try keyup instead of input but not working. This line of code below is working fine (tested with other conditions).

$(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
– epascarello, Commented Sep 2, 2020 at 13:41
You could use jquery validation plugin: jqueryvalidation.org — Pete
– Pete, Commented Sep 2, 2020 at 13:48

Chaz · Accepted Answer · 2020-09-02 14:21:36Z

1

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/

edited Sep 2, 2020 at 14:21

answered Sep 2, 2020 at 14:03

Chaz

7221 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amaan warsi Over a year ago

Well your answer is working but my has been solved by focusout event

Amaan warsi Over a year ago

And thank you for your such interest on my question

Collectives™ on Stack Overflow

How to validate form using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related