Validation trigger on "Change" event #997

Closed
tmorehouse opened this Issue Jan 29, 2014 · 9 comments

Comments

Projects
None yet
5 participants

From the code I have looked at, it looks like validation is only triggered on key events, blur/focus events.

I use several plugins for custom input fields, which hide the original text field and replace it with nameless select inputs (i.e. combodate.js, tokenfiled.js, etc). All of these plugins set the original input as display none (or push off screen) so that they remain serializable. When the specialised fields are set by the user, they update the original input's value and then fire a change event on the original input.

Unfortunately validation does not happen on the original fields until form submit happens.

I tried a workaround bu doing something like the following:

$('#original_element').on('change', function(evt){
    $(this).trigger('blur');
}

and

$('#original_element').on('change', function(evt){
    $(this).valid();
}

But I get weird results. The error message will show up, but then when another field is focused, the error class disappears from the element (well the element wrapper), and it is also kind of a kludgy way of doing it.

Would it be possible to have validator also listen to on change events as well?

pratik60 commented Aug 7, 2014

Anyone else has any idea?

Owner

staabm commented Aug 9, 2014

Could you provide a jsfiddle which shows your use case and problem?

pratik60 commented Aug 12, 2014 edited

Don't worry, its all done!

Basically on change, I had to do something like this

  $("#embed-form").validate().element(':input[name="upload_docs_file"]');

Excellent, I will try this out.

Collaborator

jzaefferer commented Dec 9, 2014

Closing due to inactivity.

jzaefferer closed this Dec 9, 2014

Hello,

Im having the same issue. Need to validate selects tag on changes event is triggered.
this is not solved yet?

@ghost

ghost commented Oct 21, 2016 edited by ghost

Here is a temporary solution I use:

$('form select').each(function(){
    var event = $._data(this, 'events');
    if(!event.change) {
        $(this).bind("change", function() {
            $(this).blur().focus();
        });
    }       
});

@cybersubtype Thanks...
I solved following @pratik60 recomendations...

Thanks a lot guys!

I find it pleasantly amusing how such old posts help people, on here or stack overflow :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment