檢查表單中的輸入是否在 Jquery 中為空

Question

我在模態中有一個表單輸入

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

我使用 laravel 作為我的框架，這是我在控制器中的存儲功能：

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.']);
}

我想在提交 ajax 請求之前檢查表單輸入是否為空，因此當我單擊保存按鈕時，它應該檢查是否有任何表單為空，如果為真，則會發出警報，如果它們不為空，則它將提交ajax請求。

    $('#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');
          }
      });
    }
});

問題是當我單擊保存按鈕而某些表單為空時，它會跳過 if 條件並運行 else 條件並提示錯誤。 我檢查了錯誤，它告訴我不能有我所期望的空值。 如果我填寫了它成功存儲的所有表格。 我不明白為什么沒有檢測到 if 條件為真。

Answer 1

它沒有被跳過，只是輸入字段輸出字符串值，因此空輸入字段等效於 "" 或空字符串。

您可以使用 .length 進行空檢查。

我還注意到您忘記在 ID 前面加上符號 #。

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');
}