在同一页面上登录和注册表单Laravel 5.6 [英] Login and Register form on the same page Laravel 5.6

查看:71
本文介绍了在同一页面上登录和注册表单Laravel 5.6的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的登录和注册页面是相同的.因此,当我用错误的凭据填写注册页面时,登录表单和注册表单都会出现错误.

My login and register page is the same. So when I fill the register page with wrong credentials, errors appear for both login and register forms.

如何通过提交"按钮onclick事件解决此问题并使登录页面隐藏?接受其他建议.

How can I fix this issue from a Submit button onclick event and make the login page hidden? Alternative suggestions accepted.

注意:我正在使用laravel和jquery.但是我不想从服务器端更改它.

Note: I am using laravel and jquery. But I don't want to change it from server side.

如果注册失败,则应将重点放在注册页面上,而将焦点放在登录页面上.

When the registration fail it should be focus on register page but it is focusing the login page.

使其最简单的方法是什么?有什么建议? 我不知道如何使用错误袋如果有人也告诉我该怎么做会很好.非常感谢.

What is the easiest way to make it work? Any suggestions? I don't know how to use error bags It would be fine if someone also tell me how to do it. Many thanks.

我尝试了此操作,但是该按钮应该是提交"按钮,因此它不起作用:

I tried this but the button should be submit button so it doesn't work:

    document.getElementById("login_id").style.visibility = "hidden";

这里是html代码;

Here the html code;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>MaterialLab - jQuery full version</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:300,400,500,600" rel="stylesheet">
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/vendor.bundle.css">
    <link rel="stylesheet" href="assets/css/app.bundle.css">
    <link rel="stylesheet" href="assets/css/theme-a.css">
</head>
<body id="auth_wrapper">
<div id="login_wrapper">

    <div id="login_content">
        <div class="logo">
            <img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
        </div>
        <h1 class="login-title">
            Sign In to your account
        </h1>
        <div class="login-body">
            <form id="1" style="visibility: visible" method="POST" action="{{ route('login') }}">
                @csrf
                <div class="form-group label-floating is-empty">
                    <label class="control-label">Email</label>
                    <input type="email" name="email" class="form-control"  value="{{ old('email') }}" required>

                    @if ($errors->has('email'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('email') }}</strong>
                         </span>
                    @endif

                </div>
                <div class="form-group label-floating is-empty">
                    <label class="control-label">Password</label>
                    <input type="password" name="password" class="form-control" required>

                    @if ($errors->has('password'))
                        <span class="invalid-feedback">
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                    @endif

                </div>
                <a href="javascript:void(0)" class="forgot-pass pull-right">Forgot Password?</a>
                <div class="checkbox inline-block">
                    <label>
                        <input type="checkbox" class="checkbox-inline" value="">
                        Remember Me
                    </label>
                </div>
                <button type="submit" class="btn btn-info btn-block m-t-40">Sign In</button>
                <div class="login-options">
                    <span>OR</span>
                    <hr/>
                </div>
                <div class="row">

                    <div class="col-xs-12">
                        <button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign In with
                            Google
                        </button>
                    </div>

                </div>
            </form>
        </div>
        <div class="login-footer p-15">
            <p>
                Don't have an account? <a href="javascript:void(0)" data-toggle="register">Create an account</a>
            </p>
        </div>
        <div id="register_wrapper">
            <ul class="card-actions icons right-top">
                <li>
                    <a href="javascript:void(0)" data-toggle="register">
                        <i class="zmdi zmdi-close"></i>
                    </a>
                </li>
            </ul>
            <div class="logo">
                <img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
            </div>
            <h1 class="login-title">
                Create an account
            </h1>


                <div class="col-xs-12">
                    <button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign Up with Google
                    </button>
                </div>


                <form class="clear-both"  method="POST" action="{{ route('register') }}">
                    @csrf
                    <h2 class="text-center p-t-20">
                        Or sign up below
                    </h2>
                    <div class="form-group label-floating is-empty">
                        <label class="control-label">Name</label>
                        <input type="text" name="name" class="form-control" required>
                        @if ($errors->has('name'))
                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                        @endif
                    </div>

                    <div class="form-group label-floating is-empty">
                        <label class="control-label">Email</label>
                        <input type="email" name="email" class="form-control" required>

                        @if ($errors->has('email'))
                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                        @endif
                    </div>

                    <div class="form-group label-floating is-empty">
                        <label class="control-label">Password</label>
                        <input type="password" name="password" class="form-control" required>

                        @if ($errors->has('password'))
                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                        @endif
                    </div>

                    <div class="form-group label-floating is-empty">
                        <label class="control-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" required>
                    </div>

                    <button type="submit" name="submit" onClick="makeLoginFormHidden()" class="btn btn-info btn-block m-t-40">Create my account</button>
                </form>
            </div>
            <div class="login-footer p-15">
                <p>
                    Already have an account? <a href="javascript:void(0)" data-toggle="register">Sign In</a>
                </p>
            </div>
        </div>
    </div>
</div>
<script>
    function makeLoginFormHidden() {
        document.getElementById("1").style.visibility = "hidden";
    }
</script>
<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/app.bundle.js"></script>
</body>
</html>

推荐答案

通过简单地设置和获取会话变量来检查错误类型

Check what kind of error it is by simply setting and getting session variables

// From login action
Session::flash('login_error',true);

// In the view

@if(Session::has('login_error'))
    // activate the login form and show the error
@endif  

这篇关于在同一页面上登录和注册表单Laravel 5.6的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆