HTML5 TextArea Validation with jQuery to disallow certain words
September 20, 2014
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.