feat: add sweetalert client-side validation and standardize alerts
This commit is contained in:
parent
3e05b3b981
commit
d2a705732c
|
|
@ -62,4 +62,47 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('form[action="{{ url('/login') }}"]');
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = form.querySelector('input[name="email"]').value.trim();
|
||||
const password = form.querySelector('input[name="password"]').value;
|
||||
|
||||
if (!email) {
|
||||
return showError('Validasi Gagal', 'Email tidak boleh kosong.');
|
||||
}
|
||||
|
||||
// Simple email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
return showError('Validasi Gagal', 'Format email tidak valid.');
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
return showError('Validasi Gagal', 'Password tidak boleh kosong.');
|
||||
}
|
||||
|
||||
// If all validation passes, submit the form
|
||||
this.submit();
|
||||
});
|
||||
}
|
||||
|
||||
function showError(title, text) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: title,
|
||||
text: text,
|
||||
confirmButtonColor: '#0f766e',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -81,4 +81,72 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('form[action="{{ url('/register') }}"]');
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = form.querySelector('input[name="name"]').value.trim();
|
||||
const email = form.querySelector('input[name="email"]').value.trim();
|
||||
const phone = form.querySelector('input[name="phone"]').value.trim();
|
||||
const password = form.querySelector('input[name="password"]').value;
|
||||
const passwordConfirmation = form.querySelector('input[name="password_confirmation"]').value;
|
||||
const terms = form.querySelector('#terms').checked;
|
||||
|
||||
if (!name) {
|
||||
return showError('Validasi Gagal', 'Nama lengkap tidak boleh kosong.');
|
||||
}
|
||||
|
||||
if (!email) {
|
||||
return showError('Validasi Gagal', 'Email tidak boleh kosong.');
|
||||
}
|
||||
|
||||
// Simple email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
return showError('Validasi Gagal', 'Format email tidak valid.');
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
return showError('Validasi Gagal', 'Password tidak boleh kosong.');
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
return showError('Validasi Gagal', 'Password minimal 6 karakter.');
|
||||
}
|
||||
|
||||
if (!passwordConfirmation) {
|
||||
return showError('Validasi Gagal', 'Konfirmasi password tidak boleh kosong.');
|
||||
}
|
||||
|
||||
if (password !== passwordConfirmation) {
|
||||
return showError('Validasi Gagal', 'Password dan Konfirmasi Password tidak sama.');
|
||||
}
|
||||
|
||||
if (!terms) {
|
||||
return showError('Validasi Gagal', 'Anda harus menyetujui syarat dan ketentuan.');
|
||||
}
|
||||
|
||||
// If all validation passes, submit the form
|
||||
this.submit();
|
||||
});
|
||||
}
|
||||
|
||||
function showError(title, text) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: title,
|
||||
text: text,
|
||||
confirmButtonColor: '#0f766e',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -80,5 +80,6 @@ function initPasswordToggles() {
|
|||
});
|
||||
}
|
||||
</script>
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,8 @@
|
|||
icon: 'success',
|
||||
title: 'Berhasil!',
|
||||
text: @json(session('success')),
|
||||
timer: 3000,
|
||||
showConfirmButton: false,
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
timerProgressBar: true,
|
||||
didOpen: (toast) => {
|
||||
toast.addEventListener('mouseenter', Swal.stopTimer)
|
||||
toast.addEventListener('mouseleave', Swal.resumeTimer)
|
||||
}
|
||||
confirmButtonColor: '#0f766e',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
</script>
|
||||
@endif
|
||||
|
|
|
|||
Loading…
Reference in New Issue