Блог

Я пытаюсь выяснить, как я могу проверить, являются ли какие-либо значения в объекте пустыми, а затем показать соответствующую ошибку.

Входные данные формы выглядят следующим образом:

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

Должен быть более простой способ проверки значений в объекте.

Вы можете просто использовать повторно используемую функцию, как показано ниже:

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