Я хочу защитить свои модальности входа / регистрации перед закрытием, если я щелкаю за пределами модального содержимого, и следующая проблема - если я неправильно заполню форму, модал закроется, и после нажатия на ссылку, ошибка будет записана на этом модальное - я не хочу закрывать, если ошибка в заполненных формах и ошибка будет записана в открытом модальном, также я хочу, если я щелкаю за пределами модального содержимого, этот модальный не будет закрыт.
Это ссылки к модалам в 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();
}
}
})
});
})