[英]Laravel - want to prevent modal before closing if error is in form
如果我點擊模態內容之外,我想在關閉之前保護我的登錄/注冊模態,下一個問題是如果我填寫表單錯誤,模態將關閉,點擊鏈接后,錯誤將寫在這個模態上 - 我如果填寫的表單中出現錯誤並且錯誤將在打開的模態中寫入,我想不關閉,我也希望如果我在模態內容之外單擊,該模態將不會被關閉。
這是 header.blade.php 中模態的鏈接:
<div id="app">
<div class="container">
<a class="menu-link" data-toggle="modal" data-target="#loginModal">Přihlásit se</a>
<a class="menu-link" data-toggle="modal" data-target="#registerModal">Registrace</a>
</div>
</div>
@include('auth.login')
@include('auth.register')
這是 auth/login.blade.php 代碼:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" id="loginModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="loginModalLabel">Přihlášení do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.login.send') }}" data-remote="true" method="post">
@csrf
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Přihlásit">
</section>
@if ($errors->has('email'))
{{ $errors->first('email') }}
@endif
@if ($errors->has('password'))
{{ $errors->first('password') }}
@endif
</form>
</div>
<div class="modal-footer">
<div style="ml-auto">
@if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.reset') }}">Zapomněl jsem heslo</a>
@endif
</div>
<div style="mr-auto">
@if (Route::has('auth.reset'))
<a class="btn btn-primary" href="{{ route('auth.register') }}">Ještě nemám účet</a>
@endif
</div>
</div>
</div>
</div>
</div>
@section('scripts')
@parent
@if($errors->has('email') || $errors->has('password'))
<script>
$(document).ready(function(){
$('.launch-modal').click(function(){
$('#loginModal').modal({
show: true
backdrop: 'static'
});
});
});
</script>
@endif
<script src="https://www.google.com/recaptcha/api.js?render=6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL', {action: 'auth.login.send'}).then(function(token) {
...
});
});
</script>
@endsection
這是 auth/register.blade.php:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" id="registerModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="registerModalLabel">Registrace do Universe Of Art</h3>
<button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" action="{{ route('auth.register.send') }}" method="post">
@csrf
<section class="field-container">
<input class="form-field" type="text" id="name" class="form-control" name="name" placeholder="Nick" required>
</section>
<section class="field-container">
<input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-field" type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="Heslo" required>
</section>
<section class="field-container">
<input class="form-submit" type="submit" value="Registrovat">
</section>
@if ($errors->has('name'))
{{ $errors->first('name') }}
@endif
@if ($errors->has('email'))
{{ $errors->first('email') }}
@endif
@if ($errors->has('password'))
{{ $errors->first('password') }}
@endif
</form>
</div>
<div class="modal-footer">
<div style="mx-auto">
@if (Route::has('auth.login'))
<a class="btn btn-primary" href="{{ route('auth.login') }}">Již mám účet</a>
@endif
</div>
</div>
</div>
</div>
</div>
@section('scripts')
@parent
<script>
$(function () {
$('#registerForm').submit(function (e) {
e.preventDefault();
let formData = $(this).serializeArray();
$(".invalid-feedback").children("strong").text("");
$("#registerForm input").removeClass("is-invalid");
$.ajax({
method: "POST",
headers: {
Accept: "application/json"
},
url: "{{ route('auth.register') }}",
data: formData,
success: () => window.location.assign("{{ route('auth.account') }}"),
error: (response) => {
if(response.status === 422) {
let errors = response.responseJSON.errors;
Object.keys(errors).forEach(function (key) {
$("#" + key + "Input").addClass("is-invalid");
$("#" + key + "Error").children("strong").text(errors[key][0]);
});
} else {
window.location.reload();
}
}
})
});
})
您應該使用 ajax 來防止模態關閉,因為它不會刷新您的頁面,但如果您不想使用 ajax,您可以通過在會話中保存變量並在頁面刷新后檢查變量是否存在然后顯示帶有錯誤的模態來實現此目的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.