单击提交后步进器表单不发送数据。 MD 引导程序 Laravel
The stepper form does not send data after clicking submit. MDBootstrap Laravel
我正在使用“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');
}
控制器方法需要 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>
我正在使用“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');
}
控制器方法需要 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>