feat: add sweetalert client-side validation and standardize alerts

This commit is contained in:
ardhikaxx 2026-06-14 19:04:46 +07:00
parent 3e05b3b981
commit d2a705732c
4 changed files with 114 additions and 9 deletions

View File

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

View File

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

View File

@ -80,5 +80,6 @@ function initPasswordToggles() {
});
}
</script>
@stack('scripts')
</body>
</html>

View File

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