टेक्स्टरेरा में पैटर्न मिलान को कैसे सत्यापित करें?

Question

जब मैं एक अवैध मूल्य के साथ जावास्क्रिप्ट में textarea.checkValidity() या textarea.validity.valid का उपयोग करता हूं, तो वे हमेशा सत्य लौटते हैं, मैं क्या गलत कर रहा हूं?

<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

एचटीएमएल 5 <textarea> तत्व pattern विशेषता का समर्थन नहीं करता।

<textarea> विशेषताओं के लिए MDN doc देखें।

आपको इस कार्यक्षमता को स्वयं परिभाषित करने की आवश्यकता हो सकती है।

या ऐसा करने के लिए जावास्क्रिप्ट/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

यह डोम में सभी textareas पर pattern विशेषता सक्षम और 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"); 
       } 
      } 
     } 

    }); 
});