Come convalidare la corrispondenza del modello nella textarea?

Question

Quando uso textarea.checkValidity() o textarea.validity.valid in javascript con un valore non valido entrambi restituiscono sempre true, cosa sto facendo male?

<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> elemento non supporta l'attributo pattern.

Vedere MDN doc per gli attributi <textarea> consentiti.

Potrebbe essere necessario definire questa funzionalità da soli.

Oppure seguire la pratica tradizionale di HTML 4 di definire una funzione JavaScript/jQuery per farlo.

Answer 2

È possibile implementare da soli setCustomValidity(). In questo modo, this.checkValidity() risponderà a qualsiasi regola che si desidera applicare al proprio elemento. Non credo che this.validity.patternMismatch possa essere impostato manualmente, ma è possibile utilizzare invece la propria proprietà, se necessario.

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

Ciò consentirà l'attributo pattern su tutte le aree di testo nel DOM e innescare la validazione HTML5. Ci vuole anche in schemi conto che hanno la ^ o $ operatori e fa un incontro globale utilizzando la g bandiera 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"); 
       } 
      } 
     } 

    }); 
});