单击提交后步进器表单不发送数据。 MD 引导程序 Laravel

Question

我正在使用“laravel vue ui auth”进行身份验证，并且所有功能都可以使用。然后我使用 mdbootstrap 中的步进器更改了表单寄存器。但是提交按钮不起作用，数据不执行 post 操作。步进器似乎有缺陷或错误，但我不知道它是什么。 blade:

<ul method="POST" action="{{ route('register') }}" class="stepper linear">
                        @csrf
                        <li class="step active">
                            <div class="step-title waves-effect waves-dark">Personal Info</div>
                                <div class="step-new-content">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Full Name</label>
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Via Sarah">
                                            </div>
                                        </div>
                                    </div>
                                <div class="step-actions">
                                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                                </div>
                            </div>
                        </li>
                        <li class="step">
                            <div class="step-title waves-effect waves-dark">Login Information</div>
                            <div class="step-new-content">
                            <div class="form-group">
                                <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                            <div class="step-actions">
                                <div class="form-group">
                                <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="submit">{{ __('Register') }}</button>
                                </div>
                            </div>
                            </div>
                        </li>
                    </ul>

控制器：

protected function create(array $data)
{
    $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);

    return view('auth.register');
}

Answer 1

控制器方法需要 public 而不是 protected。在参数中也使用 Request $request。

代码如下：

public function create(Request $request)
{
    // Validate request
    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => Hash::make($request->password),
    ]);

    return view('auth.register');
}

注意：不要忘记在控制器顶部使用Request。

更新：

用表格包裹你的<ul>。 <ul> 不支持 method 和 action 属性。

这是最终版本：

<form method="POST" action="{{ route('register') }}">
<ul class="stepper linear">
                        @csrf
                        <li class="step active">
                            <div class="step-title waves-effect waves-dark">Personal Info</div>
                                <div class="step-new-content">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Full Name</label>
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Via Sarah">
                                            </div>
                                        </div>
                                    </div>
                                <div class="step-actions">
                                    <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
                                    <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
                                </div>
                            </div>
                        </li>
                        <li class="step">
                            <div class="step-title waves-effect waves-dark">Login Information</div>
                            <div class="step-new-content">
                            <div class="form-group">
                                <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                            <div class="step-actions">
                                <div class="form-group">
                                <button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="submit">{{ __('Register') }}</button>
                                </div>
                            </div>
                            </div>
                        </li>
                    </ul>
</form>

单击提交后步进器表单不发送数据。 MD 引导程序 Laravel

The stepper form does not send data after clicking submit. MDBootstrap Laravel

step

formwizard

laravel

stepper

mdbootstrap