ajax - 如何在 Laravel 中使用 Ajax 单击时验证模态表单

Question

我有一个用于登录 Laravel 项目的模式表单。当我输入虚假数据并单击“登录”按钮时，页面刷新和模式正在关闭。只有当我再次打开模式时，我才能看到错误。这不是用户友好的。我想使用 Ajax 验证模式，如果出现问题而不刷新页面，则显示错误

这是我的模态

<form action="/login" method="post">
    @csrf
    <div class="sign-in-wrapper">
        <a href="#0" class="social_bt facebook">Login with Facebook</a>
        <a href="#0" class="social_bt google">Login with Google</a>
        <div class="divider"><span>Or</span></div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" class="form-control" name="email" id="email">
            <i class="icon_mail_alt"></i>
            @error('email')
            <strong style="color: red">{{$message}}</strong>
            @enderror
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="password" class="form-control" name="password" id="password" value="">
            <i class="icon_lock_alt"></i>
            @error('password')
            <strong style="color: red">{{$message}}</strong>
            @enderror
        </div>
        <div class="clearfix add_bottom_15">
            <div class="checkboxes float-left">
                <input id="remember-me" type="checkbox" name="check">
                <label for="remember-me">Remember Me</label>
            </div>
            <div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
        </div>
        <div class="text-center">
            <button type="submit" class="btn_login">Log In</button>
        </div>
        <div class="text-center">
            Don’t have an account? <a href="{{ url('/register') }}">Sign up</a>
        </div>
        <div id="forgot_pw">
            <div class="form-group">
                <label>Please confirm login email below</label>
                <input type="email" class="form-control" name="email_forgot" id="email_forgot">
                <i class="icon_mail_alt"></i>
            </div>
            <p>You will receive an email containing a link allowing you to reset your password to a new preferred
                one.</p>
            <div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
        </div>
    </div>
</form>

标签： ajaxlaravelvalidationlaravel-6

Answer 1

试试这个

You need to some custom changes yourself in code.

$('#frmLogin').on('submit', function (event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: '/login',
        data: formData,
        success: function (res) {
            console.log(res); // get resposnse from controller in json
            if (res.emailError) {
                $('.error-email').show().text(res.errorMsg);
            } else {
                $('.error-email').hide();
            }

            if (res.passwordError) {
                $('.error-password').text(res.errorMsg);
            } else {
                $('.error-password').hide();
            }
        },
        error: function (data) {
            alert(data);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frmLogin" method="POST">
                @csrf
                <div class="sign-in-wrapper">
                    <a href="#0" class="social_bt facebook">Login with Facebook</a>
                    <a href="#0" class="social_bt google">Login with Google</a>
                    <div class="divider"><span>Or</span></div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="email" class="form-control" name="email" id="email">
                        <i class="icon_mail_alt"></i>
                        <strong style="color: red;display: none;" class="error-email">{{$message}}</strong>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" name="password" class="form-control" name="password" id="password" value="">
                        <i class="icon_lock_alt"></i>
                        <strong style="color: red;display: none;" class="error-password">{{$message}}</strong>
                    </div>
                    <div class="clearfix add_bottom_15">
                        <div class="checkboxes float-left">
                            <input id="remember-me" type="checkbox" name="check">
                            <label for="remember-me">Remember Me</label>
                        </div>
                        <div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn_login">Log In</button>
                    </div>
                    <div class="text-center">
                        Don’t have an account? <a href="{{ url('/register') }}">Sign up</a>
                    </div>
                </div>
            </form>