检查表单中的输入是否在 Jquery 中为空

Question

I have a form input in a modal

<div class="modal fade" id="formModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content p-3">
        <div class="modal-header">
            <h4 class="modal-title" id="formHeading"></h4>
        </div>
        <div class="modal-body">
            <form id="formRombel" name="formRombel" class="form-horizontal">
                <input type="hidden" name="rombel_id" id="rombel_id"></input>
                <div class="row form-group">
                    <label for="rombel">Rombel</label>
                    <input type="text" name="rombel" id="rombel" class="form-control" required>
                </div>
                <div class="row form-group">
                    <label for="tingkatan">Tingkatan</label>
                    <select name="tingkatan" id="tingkatan" class="form-control">
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="row form-group">
                    <label for="jurusan">Jurusan</label>
                    <select name="jurusan" id="jurusan" class="form-control">
                        <option value="">-- Pilih --</option>
                        @foreach($jurusan as $j)
                        <option value="{{ $j->id }}">{{ $j->kode }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row form-group">
                    <label for="tahun_ajaran">Tahun Ajaran</label>
                    <input type="text" name="tahun_ajaran" id="tahun_ajaran" class="form-control" required>
                </div>
                <div class="row form-group mt-3">
                    <button type="submit" class="form-control btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

I'm using laravel as my framework and this is my store function in the controller:

public function storeRombel(Request $request){
    Rombel::updateOrCreate(['id' => $request->rombel_id],
    [
        'nama' => $request->rombel,
        'jurusan_id' => $request->jurusan,
        'tingkatan' => $request->tingkatan,
        'tahun_ajaran' => $request->tahun_ajaran,
    ]);
    return response()->json(['success', 'Data berhasil disimpan.']);
}

I want to check if the form inputs are empty before submitting an ajax request, so when i click save button it should check if any of the forms are empty and if it true then an alert will come out, if they aren't empty then it will submit the ajax request.

    $('#saveBtn').click(function (e) {
    e.preventDefault();
    $(this).html('Menyimpan..');
    var form = $('#formRombel').serialize();
    var rombel_id = $('rombel_id').val();
    var rombel = $('rombel').val();
    var tingkatan = $('tingkatan').val();
    var jurusan = $('jurusan').val();
    var tahun_ajaran = $('tahun_ajaran').val();
    if (rombel_id == "" ||  rombel == "" || tingkatan == "" || jurusan == "" || tahun_ajaran == "") {
        alert('Ada data yang kosong!');
        $('saveBtn').html('Simpan');
    }else{
        $.ajax({
          data: $('#formRombel').serialize(),
          url: "{{ route('admin.rombel.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
              $('#formRombel').trigger("reset");
              $('#formModal').modal('hide');
              $('#saveBtn').html('Simpan');
              table.draw();
          },
          error: function (data) {
              alert('Error:' + data.response);
              $('#saveBtn').html('Simpan');
          }
      });
    }
});

The problem is when i click the save button while some of the forms empty, it skips the if condition and runs the else condition and prompts out an error. I check the error and it tells me that there cannot be a null value which is what i expected. If i fill all the forms it successfully stored. I don't get why the if condition doesn't detected as true.

Answer 1

It's not being skipped, it's just that input fields output string values hence an empty input field is equivalent to "" or empty string.

You could use .length for null checking.

I also noticed you forgot to prepend the symbol # for your IDs.

var form = $('#formRombel').serialize();
var rombel_id = $('#rombel_id').val();
var rombel = $('#rombel').val();
var tingkatan = $('#tingkatan').val();
var jurusan = $('#jurusan').val();
var tahun_ajaran = $('#tahun_ajaran').val();

if (rombel_id.length == 0 ||  rombel.length == 0 || tingkatan.length == 0 || jurusan.length == 0 || tahun_ajaran.length == 0) {
    alert('Ada data yang kosong!');
    $('saveBtn').html('Simpan');
}