Wie validiere ich den Mustervergleich im Textfeld?

Question

Wenn ich textarea.checkValidity() oder textarea.validity.valid in Javascript mit einem ungültigen Wert benutze, geben beide immer wahr zurück, 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/

Answer 1

HTML5 <textarea> Element unterstützt nicht das pattern Attribut.

Siehe MDN doc für erlaubte <textarea> Attribute.

Möglicherweise müssen Sie diese Funktionalität selbst definieren.

Oder folgen Sie der traditionellen HTML 4-Praxis des Definierens einer JavaScript/jQuery-Funktion, um dies zu tun.

Answer 2

Sie können dies selbst mit setCustomValidity() implementieren. Auf diese Weise antwortet this.checkValidity() die Regel, die Sie auf Ihr Element anwenden möchten. Ich glaube nicht, this.validity.patternMismatch kann manuell festgelegt werden, aber Sie könnten stattdessen Ihre eigene Eigenschaft verwenden, falls erforderlich.

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

Answer 3

die Html5 Validierung Dies ermöglicht die pattern Attribut auf alle Textfelder in der DOM und auslösen. Es berücksichtigt auch die Muster, die die ^ oder $ Betreiber und hat eine globale Übereinstimmung mit der g Regex Flagge haben:

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

    }); 
});