检查表单中的输入在 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 请求之前检查表单输入是否为空，所以当我单击保存按钮时，它应该检查是否有任何表单为空，如果为真，则会发出警报，如果它们不是' t为空则提交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');
}