CODEWITHSUNDEEP
javascriptjquery
Steggie
Steggie

Reputation: 525

Show alert on class change

I've been busy for some time now and can't seem to get this one. It should be really simple (I guess).

I have a form on my site with ID #form-custom. When you click on the submit button and some fields are not correct, it will display an error message and a class will be added to the form, class .error.

What I am trying to do is add an eventlistener or something else that displays an alert when the class of #form-custom changes to id="form-custom" class="error".

So far I have tried these codes:

document.getElementById("form-custom").addEventListener("click", classchange);
    function classchange() {
        if document.hasClass.("error");
        alert("boe");
    }

and

if ($("#form-custom").hasClass('error')) {
            alert('boe.');
        });

and 

$(document).ready(function(){

    $('form#form-custom').click(function(){    
        if ($(this).hasClass('error')) {
            alert('boe.');
        }
    });
}

And some variations of these codes. But non do what I would like them to do...

Could some one help me out?

Upvotes: 1

Views: 482

Answers (2)

Pawan Nogariya
Pawan Nogariya

Reputation: 8950

Form submit should be the event that should work for your situation

$('#form-custom').on("submit", function()
{
     if($(this).hasClass("error"))
     {
         alert("Validation fail message");
         return false;
     }

     // submit form

});

Upvotes: 1

Xandrios93
Xandrios93

Reputation: 2295

You could use a MutationObserver
I would use something like this:

$("#form-custom").on("submit",function(){
    var me = $(this);
    // wait for the other onSubmit to set class
    setTimeout(function(){
        if(me.hasClass("error")) {
            alert("error")
        }
    });
});

Upvotes: 1

Related Questions