jquery validate with jquery mobile datebox (mobiscroll)

Question

I'm having problems with jQuery validate when using a jQuery mobile datebox.

I have my validation set to:

onkeyup: false

Which I believe triggers the validation on the focus/blur (tab) event instead.

The problem is that when I set the date using the datebox picker it doesn't seem to fire this event, so if I have a datebox with the date as "required" and it's filled out, the error message is still shown...

Edit:

Here is my fiddle:

http://jsfiddle.net/3v2ZV/

HTML

<form id="my_form" method="post">
    <input name="name" id="full-name" data-theme="a" placeholder="Name" class="required">
    <input name="athlete_datebox" id="athlete_datebox" data-theme="a" placeholder="Date of Birth" class="required">
    <input type="submit" value="submit">
</form>

JS

$(document).ready(function () {
    $('#my_form').validate({
        onkeyup: true
    });
    $('#athlete_datebox').mobiscroll().date({
        theme: 'jqm',
        display: 'modal',
        mode: 'clickpick',
        dateOrder: 'mmD ddyy',
        dateFormat: 'yy-M-dd',
        endYear: 2034
    });
    $('#my_form').on('submit', function (event) {
        event.stopPropagation();
        event.preventDefault();
        if ($('#my_form').valid()) {
            alert('is valid');
        }
    });
})

If you hit "submit" before filling out anything, you see that both fields are required. However after filling out the date with the mobiscroll date picker, the field is still listed as required even though it is not empty.

Answer 1

"I have my validation set to:

onkeyup: false

Which I believe triggers the validation on the focus/blur (tab) event instead."

You simply turned off the onkeyup event. The onfocusout event is a totally different option, and "on" by default unless you turn it off too.

I can't give you with a more detailed solution since you've provided no code.

However, the problem you describe can likely be solved by using a callback function built into your date picker (which one?). Something like "on change" or "on select", if it has these available.

Then inside the callback function, you would need to call the jQuery Validate plugin's .element() method which programmatically triggers the validation test of just that one particular element.

$('#myform').validate().element('#myelement');

If it doesn't have a callback function, you could try something like this which utilizes the jQuery change event of the element.

$('#myelement').on('change', function() {
    $('#myform').validate().element('#myelement');
});

---

EDIT:

Regarding the code in your jsFiddle.

1) Do not place semi-colons after the options within validate. This breaks the plugin.

2) Do not use a submit handler to check if the form is valid. The built-in submitHandler callback already does this.

3) Your </form> tag was spelled </for>

OP's fiddle with edits: http://jsfiddle.net/3v2ZV/4/