<!DOCTYPE html>
<html>
<head>
	<title>Laravel Ajax Validation Example</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	
	<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
 
<style>
label.error {
  color:#FB3A3A;
  font-weight:bold;
}
</style>
</head>
<body>

<div class="container">
	<h2>Laravel Ajax Validation</h2>

	<div class="alert alert-success print-success-msg" style="display:none">
        <ul></ul>
    </div>
	
	<div class="alert alert-danger print-error-msg" style="display:none">
        <ul></ul>
    </div>

	<form action="" method="post" id="register-form" novalidate="novalidate">
		<?php echo e(csrf_field()); ?>

		<div class="form-group">
			<label>First Name:</label>
			<input type="text" name="first_name" id="first_name" class="form-control" placeholder="First Name">
		</div>

		<div class="form-group">
			<label>Last Name:</label>
			<input type="text" name="last_name" id="last_name" class="form-control" placeholder="Last Name">
		</div>

		<div class="form-group">
			<strong>Email:</strong>
			<input type="text" name="email" id="email" class="form-control" placeholder="Email">
		</div>

		<div class="form-group">
			<strong>Address:</strong>
			<textarea class="form-control" id="addr" name="addr" placeholder="Address"></textarea>
		</div>

		<div class="form-group">
			<button class="btn btn-success btn-submit">Submit</button>
		</div>
	</form>
</div>

<script type="text/javascript">
/*
	$(document).ready(function() {
	    $(".btn-submit").click(function(e){
	    	e.preventDefault();

	    	var _token = $("input[name='_token']").val();
	    	var first_name = $("input[name='first_name']").val();
	    	var last_name = $("input[name='last_name']").val();
	    	var email = $("input[name='email']").val();
	    	var address = $("textarea[name='address']").val();

	        $.ajax({
	            url: "/my-form",
	            type:'POST',
	            data: {_token:_token, first_name:first_name, last_name:last_name, email:email, address:address},
	            success: function(data) {
	                if($.isEmptyObject(data.error)){
	                	alert(data.success);
	                }else{
	                	printErrorMsg(data.error);
	                }
	            }
	        });

	    }); 

	    function printErrorMsg (msg) {
			$(".print-error-msg").find("ul").html('');
			$(".print-error-msg").css('display','block');
			$.each( msg, function( key, value ) {
				$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
			});
		}
	});
*/
</script>

</body>
</html>

  
  <!-- jQuery Form Validation code -->
  <script>
  
  // When the browser is ready...
  $(function() {
  
    // Setup form validation on the #register-form element
    $("#register-form").validate({
    
        // Specify the validation rules
        rules: {
            first_name: "required",
            last_name: "required",
            email: {
                required: true,
                email: true
            }
        },
        
        // Specify the validation error messages
        messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            email: "Please enter a valid email address"
        },
        
        submitHandler: function(form) {
            //form.submit();
			
			var _token = $("input[name='_token']").val();
	    	var first_name = $("input[name='first_name']").val();
	    	var last_name = $("input[name='last_name']").val();
	    	var email = $("input[name='email']").val();
	    	var address = $("textarea[name='addr']").val();

	        $.ajax({
	            url: "/my-form",
	            type:'POST',
	            data: {_token:_token, first_name:first_name, last_name:last_name, email:email, address:address},
	            success: function(data) {
	                if($.isEmptyObject(data.error)){
	                	printSuccessMsg(data.success);
	                }else{
	                	printErrorMsg(data.error);
	                }
	            }
	        });
			
			function printErrorMsg (msg) {
				$(".print-error-msg").find("ul").html('');
				$(".print-error-msg").css('display','block');
				$.each( msg, function( key, value ) {
					$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
				});
			}
			
			function printSuccessMsg (msg) {
				$(".print-success-msg").find("ul").html('');
				$(".print-success-msg").css('display','block');
				$(".print-success-msg").find("ul").append('<li>'+msg+'</li>');
			}

			
        }
    });

  });
  
  </script>
