Question

我在一个div上有3个输入（重复多次），我想验证一下，如果用户在coreid上输入一个值，则必须插入该金额，并在fullname上具有一个值（由id给出）从sql自动获取，如果它没有值。.id不正确）在同一行上，因为它们具有相同的类和名称，因此可以进行验证，但是它们是否位于是否在同一行..即使我在第一行插入一个coreid，在第三行插入全名，在第二行插入金额，也可以提交。有什么帮助吗？

$("#myform").submit(function() {
  var currentForm = this;

  var allinputs = 0;
  var coreid = 0;
  var fullname = 0;
  var amount = 0;
  //if all inputs are empty
  $(this).find('input.cardField').each(function() {
    if ($(this).val() != "") allinputs += 1;
  });
  if (allinputs) {
    //checks if coreid has a value
    $(this).find('input.cardField.id').each(function() {
      if ($(this).val() != "") coreid += 1;
    });
    //checks if fullname has a value
    $(this).find('input.cardField.name').each(function() {
      if ($(this).val() != "") fullname += 1;
    });
    //checks if amount has a value
    $(this).find('input.cardField.cardAmount').each(function() {
      if ($(this).val() != "") amount += 1;
    });

    //if user inserts an id it must have a value on name
    if (coreid) {
      var empty = $(this).parent().find("input.cardField.name").filter(function() {
        if ($(this).val() != "") fullname += 1;
      });
      if (fullname) {
        //the name is given when the user inserts the id
        alert("it has a name, the id is correct");
      } else {
        bootbox.alert('Please insert a valid id');
        return false;
      }
      //the user inserts an amount but not an id
    } else {
      bootbox.alert('Please insert an employee id');
      return false;
    }
  } else {
    //the user can continue if he confirms
    bootbox.confirm("Empty fields, Do you want to continue?",
      function(result) {
        if (result) {
          currentForm.submit();
        }
      });
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>

如果用户插入三个输入之一，则必须插入三个值... 不管其他行（其他div）是否为空。

Answer 1

您应该遍历DIV。在每个DIV中，获取id字段的值。如果不为空，请检查其他两个字段。

$("#myform").submit(function() {
  var currentForm = this;

  var allinputs = 0;
  var missinginputs = false;
  //if all inputs are empty
  $(this).find('input.cardField').each(function() {
    if ($(this).val() != "") allinputs += 1;
  });
  if (allinputs) {
    //checks if coreid has a value
    $(this).find('div').each(function(index) {
      var coreid = $(this).find("input.cardField.id").val();
      var fullname = $(this).find("input.cardField.name").val();
      var amount = $(this).find("input.cardField.amount").val();
      if (coreid == "" && fullname == "" && amount == "") {
        // all inputs in row are empty, skip it
        return;
      } else if (coreid == "" || fullname == "" || amount == "") {
        bootbox.alert(`Enter all fields in row #${index}`);
        missinginputs = true;
      }
    });
    return !missinginputs;
  } else {
    //the user can continue if he confirms
    bootbox.confirm("Empty fields, Do you want to continue?",
      function(result) {
        if (result) {
          currentForm.submit();
        }
      });
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>
<div>
  <input type="number" name="coreid[]" class="form-control cardField id">
  <input type="text" name="fullName[]" class="form-control cardField name">
  <input type="number" name="amount[]" class="form-control cardField amount">
</div>
</form>

验证具有相同名称[]和不同行类的输入

1 个答案: