How do I validate this regex in JavaScript?

Create an onchange event that reads the pattern attribute and runs it against the value.

// Only bind event if we need to
if(!('pattern' in document.createElement('input'))){
    // Bind the event
    document.getElementById('phone').addEventListener('change', function(){
        // Get the regex and value then test it
        var regex = new RegExp(this.pattern),
            val = this.value,
            valid = regex.test(val);

        // Is it valid?
        if(!valid){
            // Do something when it's not
        }
    });
}

You should validate when submitting the form, or losing focus from the input.

If you use jQuery, this will work for all elements with pattern attribute:

$('[pattern]').each(function() {
    if (!$(this).val().match($(this).attr('pattern')))
        alert('Bad value');
});

If not, you can do something for this (similar):

var inputs = getElementsByName('input');
for (var index in inputs) {
    var input = inputs[index];
    var pattern = input.getAttribute('pattern');
    if (pattern != '' && pattern != null) {
        if (!input.value.match(pattern))
            alert('Bad value');
    }
}

These will loop through the attributes that have a pattern to identify against, check them, and alert the user if there's a problem. Of course, you can change the alert to whatever way you would like to handle it (for example, return false to cancel the form submission).

I haven't tested this code, but that's the gist of it.

You can use polyfill or add onchange event to your input.

document.getElementById('phone').addEventListener('change', function(){\
    // returns true if input matches regexp, otherwise it returns false
    var isValid = RegExp(this.pattern).test(this.value);
});

    var regex = /^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$/;
    if(phone.value.match(regex)){
        console.log('true');
    }else{
        console.log('false');
    }

I just ended up using this... It worked. @_@