【问题标题】:The stepper form does not send data after clicking submit. MDBootstrap Laravel单击提交后步进器表单不发送数据。 MDBootstrap Laravel
【发布时间】:2021-03-02 14:10:24
【问题描述】:

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

<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');
}

【问题讨论】:

    标签: laravel mdbootstrap stepper formwizard step


    【解决方案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

    更新:

    用表格包裹你的&lt;ul&gt;&lt;ul&gt; 不支持 methodaction 属性。

    这是最终版本:

    <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>
    

    【讨论】:

    • 当我在刀片上使用
      时,控制器工作正常。当我用步进器更改注册表时问题就来了
    • 那么为什么你使用 &lt;ul&gt; 而不是 &lt;form&gt; 呢? &lt;ul&gt; 不支持methodaction 属性
    • 是的,它奏效了。谢谢你。但在这里我将提交按钮移到
        之外
      • 我很高兴听到这个消息 :)
      猜你喜欢
      • 1970-01-01
      • 2011-04-01
      • 2019-12-11
      • 1970-01-01
      • 1970-01-01
      • 2020-11-12
      • 1970-01-01
      • 2016-06-14
      • 2021-01-27
      相关资源
      最近更新 更多