Form validation using jquery examples

Page: index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
	  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
	  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col">
					<h2 class="text-center">Student Registration</h2>
				<form id="frmstudent">
					<p class="form-group">
						<label>Name</label>
						<input type="text" name="name" class="form-control">
					</p>
					<p class="form-group">
						<label>Phone</label>
						<input type="text" name="phone" class="form-control">
					</p>
					<p class="form-group">
						<label>Email</label>
						<input type="text" name="email" class="form-control">
					</p>
					<p class="form-group">
						<label>Password</label>
						<input type="password" id="password" name="password" class="form-control">
					</p>
					<p class="form-group">
						<label>Confirm Password</label>
						<input type="password" name="confrim_password" class="form-control">
					</p>
					
					<p class="form-group">
						<label>City</label>
						<select class="form-control" name="city">
							<option value="">Select</option>
							<option value="Agra">Agra</option>
							<option value="Delhi">Delhi</option>
							<option value="Pune">Pune</option>
							
						</select>
					</p>
					<p class="form-group">
						<button type="submit" class="btn btn-danger">Submit</button>
					</p>
				</form>
			</div>
		</div>
	</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
	
	jQuery('#frmstudent').validate({
		rules:{
			name:"required",
			email:{
				required:true,
				email:true
			},
			phone:{
				required:true,
				// phoneUS: true,
        		minlength:10,
        		maxlength:10
			},
			password:{
				required:true,
				minlength:5
			},
			confrim_password: {
	            minlength: 5,
	            equalTo: "#password"
	        },
	        city: {
	            required:true,
	        }

		},messages:{
			name:"Please enter your name",
			phone:{
				required:"Please enter Mobile Number",
				// phoneUS: "Please enter Valid Number",
        		minlength:"Please Enter Min 10 Digit",
        		maxlength:"Please Enter Max 10 Digit"
				
			},
			email:{
				required:"Please enter email",
				email:"Please enter valid email",
			},
			password:{
				required:"Please enter your password",
				minlength:"Password must be 5 char long"
			},
			confrim_password: {
	            required:"Please enter your password",
				equalTo:"Both Password not matched"
	            
	        },
	        city: {
	            required:"Please select city",
	        }
		},
		submitHandler:function(form){
			form.submit();
		}
	});
</script>
</html>
<style>
	p{
		margin-bottom: 3px !important;
	}
	.error{
		color: #f00;
		font-size: 12px;
	}
</style>
Quick ask your Question
Form validation using jquery examples

tags
