JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

			<!-- Login card -->
			<form class="login-form" action="/accounts/authenticate" method="post" id="login_form"  name="login_form" >
				<input type="hidden" name="{{ csrf_name }}" value="{{ csrf_hash }}" />
				<div class="card mb-0">
					<div class="card-body">
						<div class="text-center mb-3">
							<i class="icon-reading icon-2x text-slate-300 border-slate-300 border-3 rounded-round p-3 mb-3 mt-1"></i>
							<h5 class="mb-0">Login to your account</h5>
							<span class="d-block text-muted">Your credentials</span>
						</div>

						<div class="form-group form-group-feedback form-group-feedback-left">
							<input type="email" id="email" name="email" class="form-control" placeholder="email">
							<div class="form-control-feedback">
								<i class="icon-user text-muted"></i>
							</div>
						</div>

						<div class="form-group form-group-feedback form-group-feedback-left">
							<input type="password" id="password" name="password" class="form-control" placeholder="Password">
							<div class="form-control-feedback">
								<i class="icon-lock2 text-muted"></i>
							</div>
						</div>

						<div class="form-group d-flex align-items-center">
							<div class="form-check mb-0">
								<label class="form-check-label">
									<input type="checkbox" name="remember" class="form-input-styled" checked data-fouc>
									Remember
								</label>
							</div>

							<a href="/accounts/recover" class="ml-auto">Forgot password?</a>
						</div>

						<div class="form-group">
							<button type="submit"  id="login_button" class="btn btn-primary btn-block">Sign in
								<i class="icon-circle-right2 ml-2"></i></button>
						</div>

						<div class="form-group text-center text-muted content-divider">
							<span class="px-2">or sign in...

JavaScript

$(document).ready(function() {
	$('#success_alert').hide();
	let csrf_test_name = $("input[name=csrf_test_name]").val();

	$("#login_form").validate({
		rules: {
			email: {
				required: true,
				email: true,
			},
			password: {
				required: true,
				minlength: 12,
			},
		},
		messages: {
			email: {
				required: "Please enter valid email",
				email: "Please enter valid email",
			},
		},
    success: {
    function(){
    let btn = $(this);
		btn.html('please wait.. ');
		var email = $("input[name='email']").val();
		var password = $("input[name='password']").val();
		var remember = $("input[name='remember']").val();

		$.ajax({
			url: $(this).closest('form').attr('action'),
			type:$(this).closest('form').attr('method'),
			dataType: "json",
			data: {email:email, password:password, remember:remember, 'csrf_test_name' : csrf_test_name
			},
			success: function(data) {
				console.log(data);
				console.log(data.type);
				if(data.type == 'success'){
					$('#success_alert').show();
					btn.html('Login Success!');
				}else{
						Swal.fire({
							type: 'error',
							title: 'Oops...',
							html: data.text,
						});
					btn.html('Register');
				}
			}
		});
    }    
    }
	});

// just for the demos, avoids form submit
	jQuery.validator.setDefaults({
		debug: true,
		success: "valid"
	});


});