HTML5 TextArea Validation with jQuery to disallow certain words

Baljeet Singh

1 minute read

In this tutorial i will show to how to validate html5 textarea with jQuery. Here i will be focusing on how to restrict some words to be typed in to the textarea. If these words are found then the form will not submit.

Reminder: Those of you who don’t know, html5 pattern attribute doesn’t work on textarea. Create two files index.html & script.js as shown below. index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
    <div class="form-group">
      <form action="" method="get" accept-charset="utf-8">
      <textarea class="form-control" name="the-new-com" id="the-new-com" cols="30" rows="10"></textarea>
      <br>
      <input class="btn btn-success" type="submit" name="submit" id="submit">
    </form>
    </div>
    </div>
  </body>

</html>

 script.js

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
    <div class="form-group">
      <form action="" method="get" accept-charset="utf-8">
      <textarea class="form-control" name="the-new-com" id="the-new-com" cols="30" rows="10"></textarea>
      <br>
      <input class="btn btn-success" type="submit" name="submit" id="submit">
    </form>
    </div>
    </div>
  </body>

</html>

Here in script.js, when the document is ready & submit button is clicked jQuery checks to see the index of www & http in the textarea input string. If the words are found then form is not submitted else the form is submitted.

Note: You may also try using .match() jQuery function, which works similar to html5 pattern.

comments powered by Disqus