Incompatibility with formatter.js and jquery validation plugin?

Question

I'm having an issue with formatter.js and a the validation jquery plugin.

<div class="formClear">
    <label for="text-basic">
        Phone<em> *</em></label>
    <input type="tel" name="Phone" id="Phone" class="required" />
</div>

When I apply the following formatter to a specific field, and then use the jquery validation plugin to make it a required field, the jquery plugin no longer enforces it as a required field.

if (document.getElementById('Phone') != null) {
    new Formatter(document.getElementById('Phone'), {
        'pattern': '({{999}}) {{999}}-{{9999}}',
        'persistent': true
    });
}

If I comment that chunk of code out, the field's requiredness is enforced... But when both are in place, the validation for the Phone field doesn't occur. It's as though the two weren't designed to be compatible.

Specifically, after the call to checkForm() the errorMap object has all the validation failures EXCEPT the one for Phone. Is the Formatter wiping out some event handler that the jquery validation plugin depends on and as such, I will need to add additional code for? Any insight/code samples would be appreciated.

Answer 1

The problem came from the fact that the Formatter from formatter.js will put the formatting output in the value of the textbox even when the user does not supply a value to the field. Thus, in my example, the pattern that is supplied will not ever work with a required field validation from the jquery plugin unless I set persistent to false:

if (document.getElementById('Phone') != null) {
    new Formatter(document.getElementById('Phone'), {
        'pattern': '({{999}}) {{999}}-{{9999}}',
        'persistent': false
    });
}