Как проверить соответствие шаблонов в textarea?

Когда я использую textarea.checkValidity() или textarea.validity.valid в javascript с недопустимым значением, оба из них всегда возвращают true, что я делаю неправильно?

<textarea name="test" pattern="[a-z]{1,30}(,[a-z]{1,30})*" id="test"></textarea>

jQuery('#test').on('keyup', function() {
    jQuery(this).parent().append('<p>' + this.checkValidity() + ' ' +
    this.validity.patternMismatch + '</p>');
});

http://jsfiddle.net/Riesling/jbtRU/9/

Ответ 1

Элемент HTML5 <textarea> не поддерживает атрибут pattern.

См. MDN doc для разрешенных атрибутов <textarea>.

Вам может потребоваться определить эту функциональность самостоятельно.

Или следуйте традиционной практике HTML 4 для определения функции JavaScript/jQuery для этого.

Ответ 2

Вы можете реализовать это самостоятельно с помощью setCustomValidity(). Таким образом, this.checkValidity() ответит всем правилам, которые вы хотите применить к элементу. Я не думаю, что this.validity.patternMismatch может установить вручную, но при необходимости вы можете использовать свое собственное свойство.

http://jsfiddle.net/yanndinendal/jbtRU/22/

$('#test').keyup(validateTextarea);

function validateTextarea() {
    var errorMsg = "Please match the format requested.";
    var textarea = this;
    var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$');
    // check each line of text
    $.each($(this).val().split("\n"), function () {
        // check if the line matches the pattern
        var hasError = !this.match(pattern);
        if (typeof textarea.setCustomValidity === 'function') {
            textarea.setCustomValidity(hasError ? errorMsg : '');
        } else {
            // Not supported by the browser, fallback to manual error display...
            $(textarea).toggleClass('error', !!hasError);
            $(textarea).toggleClass('ok', !hasError);
            if (hasError) {
                $(textarea).attr('title', errorMsg);
            } else {
                $(textarea).removeAttr('title');
            }
        }
        return !hasError;
    });
}

Ответ 3

Это позволит атрибут pattern на всех текстовых областях в DOM и активировать проверку Html5. Он также учитывает шаблоны, которые имеют операторы ^ или $, и выполняет глобальное соответствие с использованием флага g Regex:

$( document ).ready( function() {
    var errorMessage = "Please match the requested format.";

    $( this ).find( "textarea" ).on( "input change propertychange", function() {

        var pattern = $( this ).attr( "pattern" );

        if(typeof pattern !== typeof undefined && pattern !== false)
        {
            var patternRegex = new RegExp( "^" + pattern.replace(/^\^|\$$/g, '') + "$", "g" );

            hasError = !$( this ).val().match( patternRegex );

            if ( typeof this.setCustomValidity === "function") 
            {
                this.setCustomValidity( hasError ? errorMessage : "" );
            } 
            else 
            {
                $( this ).toggleClass( "error", !!hasError );
                $( this ).toggleClass( "ok", !hasError );

                if ( hasError ) 
                {
                    $( this ).attr( "title", errorMessage );
                } 
                else
                {
                    $( this ).removeAttr( "title" );
                }
            }
        }

    });
});