44

When I use textarea.checkValidity() or textarea.validity.valid in javascript with an invalid value both of those always return true, what am I doing wrong?

<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/

2

5 Answers 5

46

HTML5 <textarea> element does not support the pattern attribute.

See the MDN doc for allowed <textarea> attributes.

You may need to define this functionality yourself.

Or follow the traditional HTML 4 practice of defining a JavaScript/jQuery function to do this.

14

You can implement this yourself with setCustomValidity(). This way, this.checkValidity() will reply whatever rule you want to apply to your element. I don't think this.validity.patternMismatch can set manually, but you could use your own property instead, if needed.

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;
    });
}
1
  • 2
    Good answer and thanks for the fiddle. It helped me out! Commented Jan 29, 2015 at 19:08
9

This will enable the pattern attribute on all textareas in the DOM and trigger the Html5 validation. It also takes into account patterns that have the ^ or $ operators and does a global match using the 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" );
                }
            }
        }

    });
});
7
  • 1
    Yes, that's cleaner. :) Indeed, the pattern attribute in inputs allow ^ and $ in the regexp even though they are implicit. Commented Feb 2, 2015 at 17:47
  • The ^ and $ replace doesn't work. It should be a global (with /g) regexp (with slashes), not a regexp in a string : var patternRegex = new RegExp('^' + pattern.replace(/^\^|\$$/g, '') + '$', 'g'); Commented Jun 12, 2015 at 10:03
  • I tried to get this to work on a fiddle looking for an email address on each line. The best I could do add an m modifier and then it would match if there was an email address on ANY line. Still not what I wanted. Yann's first example above worked correctly. How would you use this method instead to solve the problem? Here is the fiddle I created: jsfiddle.net/da1hg19e Commented Sep 30, 2015 at 5:55
  • 1
    @YannDìnendal completely agree, I modified the code accordingly. @BrianLayman you could definitely customize your flags with a m multiline, but this can also be achieved in how you write your regex by taking advantage of the \n\r symbols
    – dwkd
    Commented Sep 30, 2015 at 18:18
  • 1
    It seems using HTML entities is the workaround. Instead of [^'"], use [^&apos;&quot;].
    – Jeff
    Commented Jul 26, 2020 at 14:55
0

In case there are others who use React-Bootstrap HTML form validation and not jQuery.

This does not explicitly use pattern but it works the same way.

I'm only making some changes from the documentation.

function FormExample() {
  const [validated, setValidated] = useState(false);
  const [textArea, setTextArea] = useState('');
  const textAreaRef = useRef(null);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

  const isValid = () => {
    // Put whichever logic or regex check to determine if it's valid
    return true;
  };

  useEffect(() => {
    textAreaRef.current.setCustomValidity(isValid() ? '' : 'Invalid');
    // Shows the error message if it's invalid, remove this if you don't want to show
    textAreaRef.current.reportValidity();
  }, [textArea];

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group md="4" controlId="validationCustom01">
          <Form.Label>Text area</Form.Label>
          <Form.Control
            required
            as="textarea"
            ref={textAreaRef}
            placeholder="Text area"
            value={textArea}
            onChange={(e) => setTextArea(e.target.value)}
          />
          <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <Button type="submit">Submit form</Button>
    </Form>
  );
}

render(<FormExample />);
0

All the other answers rely on jQuery/React — here's a vanilla JS one:

const invalid = { pattern: 'a', value: 'b' }
const textarea = Object.assign(document.createElement('textarea'), invalid)

if (textarea.checkValidity()) {
    const input = Object.assign(document.createElement('input'), invalid)

    document.body.addEventListener('input', (e) => {
        if (e.target.matches('textarea[pattern]')) {
            const pattern = new RegExp(`^(?:${e.target.getAttribute('pattern')})$`)

            e.target.setCustomValidity(
                pattern.test(e.target.value)
                    ? ''
                    : input.validationMessage
            )
        }
    })
}
textarea+.validation-msg::after { font-size: 0.8em; }
textarea:not(:invalid) { outline: 3px solid lawngreen; }
textarea:invalid { outline: 3px solid tomato; }
textarea:not(:invalid)+.validation-msg::after { content: "Valid!"; }
textarea:invalid+.validation-msg::after { content: "Invalid!"; }
<p>Enter 0-3 non-empty lines, with optional trailing newline:</p>
<textarea rows="5" pattern="(?:[^\n]+\n?){0,3}"></textarea>
<div class="validation-msg"></div>

The validation message is grabbed from an invalid dummy input element, so it will respect browser defaults, user agent language settings, etc.

Note that it'll handle the typical use case of invalid user input, but it won't handle situations such as programmatically changing the textarea's value, the textarea already being invalid when it's first rendered, etc. A more comprehensive solution would need to handle those scenarios with a MutationObserver or similar.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.