Jak sprawdzić poprawność dopasowywania wzorca w obszarze tekstowym?

Question

Kiedy używam textarea.checkValidity() lub textarea.validity.valid w javascript z niepoprawną wartością, obie zwracają true, co robię źle?

<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 nie obsługuje atrybutu pattern.

Zobacz atrybuty MDN doc dla dozwolonych <textarea>.

Może zajść potrzeba samodzielnego zdefiniowania tej funkcji.

Lub wykonaj tradycyjną praktykę HTML 4 definiowania funkcji JavaScript/jQuery, aby to zrobić.

Answer 2

Możesz to zaimplementować samodzielnie, korzystając z setCustomValidity(). W ten sposób, this.checkValidity() odpowie na dowolną regułę, którą chcesz zastosować do swojego elementu. Nie sądzę, aby this.validity.patternMismatch można było ustawić ręcznie, ale w razie potrzeby można użyć własnej właściwości.

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

pozwoli to atrybut pattern na wszystkie pola tekstowe w DOM i wyzwalać walidacji HTML5. Bierze także pod uwagę wzorów, które mają ^ lub $ operatorów i robi mecz Global używając g Regex flag

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

    }); 
});