javascript form word count validation wizard

supafly · 19 Mar 2011 at 19:57

Could someone help me with this. I only want to be able to submit the form if someone has written 15 words or more.

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Word Count</title>
<link href="wordcount.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="wordcount.js"></script>
</head>

<body>
<div id="container">
	<h1>jQuery Word Count</h1>

	
	<div class="quickContain">
	<div id="quick50">
		<h2>50 words for quick copying</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo orci, porta eget, tincidunt sit amet, sagittis id, turpis. Aenean sed metus at leo ullamcorper dapibus. Duis vitae risus dignissim lectus dapibus faucibus! In porttitor, ante non adipiscing ultricies, magna velit blandit dui, a tempus ligula dolor eu orci? Sed.</p>
	</div>
	</div>
	
	<ol class="forms">

		<form action="submitcontent.php" method="post">
		<!-- <li><label for="maxWord">Max Word Textarea <em class="help">(50 words or less)</em></label>

			<textarea name="maxWord" class="count[50]" id="maxWord"></textarea>
		</li>-->
		<!-- <li><label for="minMaxWord">Min &amp; Max Word Textarea <em class="help">(50&ndash;100 words)</em></label>
			<textarea name="minMaxWord" class="count[50,100]" id="minMaxWord"></textarea>
		</li>-->

		<li><label for="minWord">Min Word Textarea <em class="help">(15 words or more)</em></label>
			<textarea onkeyup="limitWords(this,5);" name="minWord" class="count[15,0]" id="minWord"></textarea>
		</li>
		<!--<li><label for="regularTextarea">Regular Textarea</label>
			<textarea name="regularTextarea" id="regularTextarea"></textarea>
		</li>-->

		<input type="text" name="tireqty" size="3" maxlength="2"  />

		<input type="submit" value="Submit Content"  onclick="return doSubmit()" />
		</form>
	</ol>
	
	
</div>


</body>
</html>

supafly · 19 Mar 2011 at 19:57

javascript

Code:

$(document).ready(function() {
	$("[class^='count[']").each(function() {
 		var elClass = $(this).attr('class');
		var description = 0;
		var maxWords = 0;
		var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

		if(countControl.length > 1) {
			description = countControl[0];
			maxWords = countControl[1];
		} else {
			maxWords = countControl[0];
		}

		$(this).after('<div class="wordCount"><strong>0</strong> Words</div>');
		if(description > 0) {
			$(this).siblings('.wordCount').addClass('error');
		}

		$(this).bind('keyup click blur focus change paste', function() {
			var text = jQuery.trim($(this).val()).replace(/\s+/g," ");
			var numWords = text.split(' ').length;
			if($(this).val() === '') {
				numWords = 0;
			}	
			$(this).siblings('.wordCount').children('strong').text(numWords);
 
			if(numWords < description || (numWords > maxWords && maxWords != 0)) {
				$(this).siblings('.wordCount').addClass('error');
			} else {
				$(this).siblings('.wordCount').removeClass('error');	
			}

		});

	});
});

supafly · 19 Mar 2011 at 19:58

css

Code:

/*****Reset*****/
#container { 
	background: #ededed; 
	border: 1px solid #ddd; 
	margin: 0 auto; 
	padding: 10px;
	position: relative;
	width: 638px;
}

.error { color: #f00; }

ol.forms { list-style: none; overflow: hidden; }
ol.forms li { float: left; margin-bottom: 12px; width: 100%; }
ol.forms label { cursor: pointer; display: block; }
ol.forms textarea {
	border: 1px solid #ddd;
	float: left; 
	font: 14px/1.5em Georgia, Times, serif; 
	height: 120px; 
	margin-right: 5px;
	overflow-y: auto; 
	padding: 5px;
	width: 500px; 
}
ol.forms textarea:focus { border: 1px solid #000; }
ol.forms div.wordCount { float: left; font-size: 20px; line-height: 30px; }

#quick50 {
	background: #fff;
	border: 1px solid #ddd;
	font-size: 11px;
	left: 5px; 
	padding: 5px;
	position: fixed; 
	width: 188px; 
}

javascript form word count validation wizard

supafly

supafly

supafly

supafly

supafly

supafly