Wie validiere ich den Mustervergleich in Textarea?

Wenn ich die textarea.checkValidity() oder textarea.Gültigkeit.gültig in javascript mit einem ungültigen Wert diese beiden immer true zurückgeben, was mache ich falsch?

<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/

InformationsquelleAutor der Frage Riesling | 2012-11-30

  1. 19

    HTML5 <textarea> - element nicht unterstützt pattern Attribut.

    Sehen die MDN doc für zulässig <textarea> Attribute.

    Können Sie festlegen müssen diese Funktionalität selbst.

    Folgen oder das traditionelle HTML-4-Praxis von der Definition einer JavaScript - /jQuery-Funktion, dies zu tun.

    InformationsquelleAutor der Antwort Dipesh Shah

  2. 7

    Implementieren Sie können dies selbst mit setCustomValidity().
    Diese Weise this.checkValidity() Antworten, was Regel, die Sie anwenden möchten, zu Ihrem element.
    Ich glaube nicht, dass this.validity.patternMismatch können manuell eingestellt, aber Sie können Ihre eigenen Anwesen statt, wenn Sie gebraucht werden.

    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;
    });
}

    InformationsquelleAutor der Antwort Yann Dìnendal

  3. 5

    Damit wird die pattern - Attribut auf alle Texteingabefelder in den DOM und trigger die Html5-Validierung. Es berücksichtigt auch die Muster, die die ^ oder $ Betreiber und führt eine Globale übereinstimmung mit der g Regex Flagge:

    $( 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" );
                }
            }
        }

    });
});

    InformationsquelleAutor der Antwort dwkd

Schreibe einen Kommentar