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.
<!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>
<!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.