MIF_E31212371/resources/views/content/student/create.blade.php

<!-- resources/views/student/create.blade.php -->

@extends('layouts/contentNavbarLayout')

@section('title', 'Add Siswa')

@section('page-script')
<script src="{{asset('assets/js/form-basic-inputs.js')}}"></script>
@endsection

@section('content')
<!-- Your existing content goes here -->
<h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Add Siswa</span>
</h4>

<div class="card">
    <div class="card-header">
        Form Input Data Siswa
    </div>
    <div class="card-body">
        <form id="formAuthentication" action="{{ route('student.insert') }}" method="POST" enctype="multipart/form-data"
            onsubmit="return validateForm()">
            @csrf
            <div class="mb-3">
                <label for="nama" class="form-label">Nama</label>
                <input type="text" class="form-control" id="nama" name="nama">
            </div>
            <div class="mb-3">
                <label for="nik" class="form-label">NIK</label>
                <input type="text" class="form-control" id="nik" name="nik" placeholder="Enter your NIK" autofocus>
                <div class="invalid-feedback" id="nikError">NIK must be 16 digits.</div>
            </div>
            <div class="mb-3">
                <label for="tgl_lahir" class="form-label">TGL Lahir</label>
                <input type="date" class="form-control" id="tgl_lahir" name="tgl_lahir" placeholder="" min="2005-01-01"
                    max="2016-12-31" autofocus>
                <div class="invalid-feedback" id="dateError">Usia tidak sesuai</div>
            </div>
            <div class="mb-3">
                <label for="jenkel" class="form-label">Jenis Kelamin</label>
                <select id="jenkel" class="select2 form-select" name="jenkel">
                    <option value="" disabled selected>(Select)</option>
                    <option value="Laki-Laki">Laki-Laki</option>
                    <option value="Perempuan">Perempuan</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="agama" class="form-label">Agama</label>
                <select id="agama" class="select2 form-select" name="agama">
                    <option value="" disabled selected>(Select)</option>
                    <option value="Islam">Islam</option>
                    <option value="Kristen">Kristen</option>
                    <option value="Hindu">Hindu</option>
                    <option value="Buddha">Buddha</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="jenjang" class="form-label">Jenjang</label>
                <select id="jenjang" class="select2 form-select" name="jenjang">
                    <option value="" disabled selected>(Select)</option>
                    <option value="SD">SD</option>
                    <option value="SMP">SMP</option>
                    <option value="SMA">SMA</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="alamat" class="form-label">Alamat</label>
                <input type="text" class="form-control" id="alamat" name="alamat">
            </div>
            <div class="mb-3">
                <label for="nama_ortu" class="form-label">Nama Ortu</label>
                <input type="text" class="form-control" id="nama_ortu" name="nama_ortu">
            </div>
            <div class="mb-3">
                <label for="kerja_ortu" class="form-label">Kerja Ortu</label>
                <input type="text" class="form-control" id="kerja_ortu" name="kerja_ortu">
            </div>
            <div class="mb-3">
                <label for="parent_phone" class="form-label">Telepon Ortu</label>
                <input type="text" class="form-control" id="parent_phone" name="no_telp"
                    placeholder="Enter your parent phone number" autofocus>
                <div class="invalid-feedback" id="phoneError">Phone number must be between 12 or 13 digits.</div>
            </div>
            <div class="mb-3">
                <label for="level" class="form-label">Kelas</label>
                <select id="level" class="select2 form-select" name="level">
                    <option value="" disabled selected>(Select)</option>
                    <option value="Pre-Kids">Pre-Kids</option>
                    <option value="Beginner">Beginner</option>
                    <option value="Intermediate">Intermediate</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
<script>
    function validateForm() {
        let valid = true;

        const nik = document.getElementById('nik').value;
        const phone = document.getElementById('parent_phone').value;
        const tglLahir = document.getElementById('tgl_lahir').value;
        const nikError = document.getElementById('nikError');
        const phoneError = document.getElementById('phoneError');
        const dateError = document.getElementById('dateError');

        // Check if NIK is a number and has 16 digits
        if (isNaN(nik) || nik.length !== 16) {
            nikError.style.display = 'block';
            valid = false;
        } else {
            nikError.style.display = 'none';
        }

        // Check if phone number is a number and has 12 to 13 digits
        if (isNaN(phone) || phone.length < 12 || phone.length > 13) {
            phoneError.style.display = 'block';
            valid = false;
        } else {
            phoneError.style.display = 'none';
        }

        // Check if birth date is between 2005 and 2016
        const minDate = new Date('2005-01-01');
        const maxDate = new Date('2016-12-31');
        const birthDate = new Date(tglLahir);
        if (birthDate < minDate || birthDate > maxDate) {
            dateError.style.display = 'block';
            valid = false;
        } else {
            dateError.style.display = 'none';
        }

        // Check if all fields are filled
        const formFields = document.querySelectorAll('#formAuthentication input, #formAuthentication select');
        formFields.forEach(field => {
            if (field.value === '') {
                field.classList.add('is-invalid');
                valid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });

        if (!valid) {
            alert('Please fill out all fields and ensure all inputs are valid.');
        }

        return valid;
    }
</script>
@endsection