テキストエリアでパターンマッチングを検証する方法は？

Question

javascriptでtextarea.checkValidity（）またはtextarea.validity.validを使用すると、無効な値が両方とも常に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/

Answer 1

HTML5 <textarea>要素はpattern属性をサポートしていません。

属性<textarea>の場合はMDN docを参照してください。

この機能を自分で定義する必要がある場合があります。

またはこれを行うためのJavaScript/jQuery関数を定義する従来のHTML 4の方法に従います。

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

Answer 3

これは、DOM内のすべてのテキストエリアにpattern属性を有効にして、HTML5の検証をトリガーします。また、^または$演算子を持つアカウントのパターンに取り、g正規表現フラグを使用してグローバルマッチを行います。

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

    }); 
});