Advanced Search

Return to Snippet

Revision: 50116
at August 11, 2011 04:31 by redconservatory
Updated Code 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>

	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>

Revision: 50115
at August 11, 2011 04:31 by redconservatory
Updated Code 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>

Revision: 50114
at August 11, 2011 04:30 by redconservatory
Updated Code 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>
	<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>

	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>

	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>

Revision: 50113
at August 11, 2011 04:29 by redconservatory
Updated Code 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>
	<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>

	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>
	minlength="2" = makes the field require at least 2 characters
	-->
	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>

Revision: 50112
at August 11, 2011 04:23 by redconservatory
Initial Code 
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>
	<!-- notes on usage
	<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#my_form').validate();
		})
	</script>
	<style type="text/css">
	label {
		display:block;
	}
	input {
		display:block;
	}
	input.error {
		border: 1px solid red;
	}
	</style>
</head>
<body>

	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>
	minlength="2" = makes the field require at least 2 characters
	-->
	<form id="my_form" action="" method="post">
		<label>First Name</label>
		<input id="my_firstname" class="required" minlength="2" />
		<label>Last Name</label>
		<input id="my_lastname" class="required" minlength="2" />
		<label>Email</label>
		<input id="my_email" class="required email" /> 
	</form>
</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
CSS:
.error 
style the error class

Form HTML:
class="required"
makes the input field required

minlength="2"
makes the field require at least 2 characters

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Basic jQuery form validation

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
forms, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript