Hướng dẫn validate form sử dụng jQuery validate

 

Đầu tiên trong view page chúng ta cần một form như sau

<form method="POST" role="form" id="form-login">
   <legend>Login</legend>
   <div class="alert alert-danger error errorLogin" style="display: none;">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <p style="color:red;display: none;" class="error errorLogin"></p>
   </div>
   <div class="form-group">
      <label for="">Email</label>
      <input type="text" class="form-control" id="email" placeholder="email" name="email" value="{{old('email')}}">
      <p style="color:red;display:none;" class="error errorEmail"></p>
   </div>
   <div class="form-group">
      <label for="">Password</label>
      <input type="password" class="form-control" id="password" placeholder="password" name="password">
      <p style="color:red;display:none;" class="error errorPassword"></p>
   </div>
   <div class="form-group">
      <input type="checkbox" name="remember"> Ghi nhớ
   </div>
   {!! csrf_field() !!}
   <button type="submit" id="dang-nhap" class="btn btn-primary">Đăng nhập</button>
</form>

Tiếp theo mình cần thêm thư viện jQuery validate vào bên trong thẻ head

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

Tiếp theo trong public/js/ ta sẽ tạo file validate.js và cần chèn nó vào trong thẻ head.

<script src="{{url(js/validate.js)}}"></script>

Chúng ta sẽ validate form trong public/js/validate.js như sau

$(function() {
		$('#form-login').validate({
			rules : {
				email : {
					required : true,
					email : true
				},
				password : {
					required : true,
					minlength : 8
				}
			},
			messages : {
				email : {
					required : "Email không được để trống",
					email : "Email không đúng định dạng",
				},
				password : {
					required : "Mật khẩu không được để trống",
					minlength : "Mật khẩu phải có ít nhất 8 ký tự"
				}
			},
			submitHandler : function (form) {
				//code in here
			}

		});
	})