GET形式的jQuery的简单解决方案

Question

im 试图阻止空字段在搜索表单中提交，表单。我找到了一个不错的解决方案并且它有效，但我不太了解 jQuery，所以代码看起来非常丑陋。任何人都可以推荐更好的解决方案吗？

这是 JS：

$(document).ready(function() {
        $("#form1").submit(function() {
            if($("#form-make").val()=="") {
                $("#form-make").prop('disabled', true);
            }
        });
    });
$(document).ready(function() {
    $("#form1").submit(function() {
        if($("#form-model").val()=="") {
            $("#form-model").prop('disabled', true);
        }
    });
});
$(document).ready(function() {
    $("#form1").submit(function() {
        if($("#form-score_start").val()=="") {
            $("#form-score_start").prop('disabled', true);
        }
    });
});
$(document).ready(function() {
    $("#form1").submit(function() {
        if($("#form-score_end").val()=="") {
            $("#form-score_end").prop('disabled', true);
        }
    });
});

<form method="GET" action="/lots" id="form1">
<div class="col-xs-6 col-sm-3">
  <div>
      <select name="make" class="form-control" id="form-make">
          <option value="" selected='false'>Select Make</option>
          @foreach($companies as $company)
          <option value="{{ $company->name }}">{{ $company->name }}</option>
          @endforeach
      </select>
  </div>
  <br>
  <div>
      <select name="model" class="form-control" id="form-model">
          <option value="" selected='false'>Select Model</option>
          @foreach($models as $model)
              <option value="{{ $model->name }}">{{ $model->name }}</option>
          @endforeach
      </select>
  </div>
  <br>
  <div>
      Condition:
      <select name="score_start" id="form-score_start">
      <option value=""selected="TRUE">select</option>
      <option value="3.5">3.5</option>
      <option value="4">4</option>
      <option value="4.5">4.5</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="9">9</option>
  </select>
  to
  <select name="score_end" id="form-score_end">
      <option value=""selected="TRUE">select</option>
      <option value="3">3</option>
      <option value="3.5">3.5</option>
      <option value="4">4</option>
      <option value="4.5">4.5</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="9">9</option>
  </select>
 </form>

Answer 1

您可以通过组合一堆重复元素来轻松修剪该代码。

$(document).ready(function() {
    $("#form1").submit(function() {
        if($("#form-make").val()=="") {
            $("#form-make").prop('disabled', true);
        }
        if($("#form-model").val()=="") {
            $("#form-model").prop('disabled', true);
        }
        if($("#form-score_start").val()=="") {
            $("#form-score_start").prop('disabled', true);
        }
        if($("#form-score_end").val()=="") {
            $("#form-score_end").prop('disabled', true);
        }
    });
});

为了进一步优化，您可以将正在检查的元素放在一个数组中，并循环访问它们。

$(document).ready(function() {
    $("#form1").submit(function() {
        var objects = ["make", "model", "score_start", "score_end"];
        for (x in objects) {
            var objectID = '#form-'+ x;
            if($(objectID).val()=="") {
                $(objectID).prop('disabled', true);
            }
        }
    });
});

Answer 2

序列化表单值，检查每个字段的值，如果有任何错误，则停止提交否则提交它！

这将是用例。

确保命名每个输入字段！可以通过这样的serializeArray()来实现：

    var $form = $(form).serializeArray();
    var $errors = 0;
    $.each($form, function(i, field) {
        $("*[name="+field.name+"]").removeClass("error");
        var $val = $.trim(field.value);
        if($val == "") {
            $("*[name="+field.name+"]").addClass("error");
            $errors++;
        }
    });

查看工作演示的小提琴