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.
Share this post
Twitter
Google+
Facebook
Reddit
LinkedIn
StumbleUpon
Pinterest
Email