检查对象的空白值并显示错误

Question

我试图弄清楚如何检查对象中的任何值是否为空白，然后显示相应的错误。

表单输入如下所示：

<form role="form" action="home.php" class="addLaneForm" id="addLaneForm" name="addLaneForm">
  <label for="addlanepartnercode">Partner Code</label><span id="addlanepartnercodeError" class="text-danger laneError" style="display:none;"> * </span>
  <input type="text" class="form-control validation" id="addlanepartnercode" placeholder="Enter Partner Code" />

  <label for="addlanepartnername">Partner Name</label><span id="addlanepartnernameError" class="text-danger laneError" style="display:none;"> *  </span>
  <input type="text" class="form-control validation" id="addlanepartnername" placeholder="Enter Partner Name" />

  <label for="addlaneipicy">IPI/CY</label><span id="addlaneipicyError" class="text-danger laneError" style="display:none;"> * </span>
  <select class="form-control validation" id="addlaneipicy">
     <option></option>
     <option value="YES">YES</option>
     <option value="NO">NO</option>
   </select>

   // few more inputs and selects

  <button type="button" class="btn btn-default btn-flat addLaneSubmit" id="addLaneSubmit" name="addLaneSubmit">Add</button>
</form>

这是 onClick 事件：

$('#addLaneSubmit').on('click', function(e){
  e.preventDefault();

  let partnerCode = $('#addlanepartnercode').val();
  let partnerName = $('#addlanepartnername').val();
  let ipiCy = $('#addlaneipicy').val();

  let addlane = new ProcessLane();

  let addlanecriteria = {
    partnerCode: partnerCode,
    partnerName: partnerName,
    ipiCy: ipiCy
  }

  // how I typically would check the values below:

  if(addlanecriteria.partnerCode == ""){
    $('#addlanepartnercodeError').show();
    return false;
  }
  if(addlanecriteria.partnerName == ""){
    $('#addlanepartnernameError').show();
    return false;
  }
  else{
    addlane.addLaneProcessing(addlanecriteria);
  }
});

我通常检查值的方式是多余且耗时的。

我确实在输入中添加了一个名为“laneError”的类。我试图通过调用一个函数来使用它来显示错误，如下所示：

function showAllErrors(){
  if($(".addLaneForm .validation") == ""){
    $('.laneError').show();
  }
}

首先，我不确定可以将函数调用放在哪里。

但是当我能够调用该函数时，我只能显示第一个错误，即“addlanepartnercodeError”。

必须有一种更简单的方法来检查对象中的值。

Answer 1

你可以有一个像下面这样的可重用函数：

showErrorMsg(elemId) {
  if($.trim($('#' + elemid).val()) === '') {
    $('#' + elemId + 'Error').show()
    return true;
  }
  return false;
}

所以你的代码就是：-

$('#addLaneSubmit').on('click', function(e){
  e.preventDefault();
  let Error = false,
  addlane = new ProcessLane();

  $('form')
    .find("input[id^='add']")
    .each((i , e){
      if(!Error) {
        Error = showErrorMsg($(e).attr('id')) 
      }
   })

   if(!Error) {
     // Your form has no errors , do your thing here
     addlane.addLaneProcessing(addlanecriteria);
   }
});