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

Posted 2023-05-09

【中文标题】检查对象的空白值并显示错误

【英文标题】：checking object for blank values and show errors

【发布时间】：2021-01-10 01:12:44

【问题描述】：

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

表单输入如下所示：

<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”。

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

【参考方案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);
   
);

【讨论】：

我收到指向此部分的错误：'#add']'

@JohnBeasley 随便输入的，现在就测试一下，基本上，应该是 "input[id^='add']" ，双引号，没有 # 并且每个循环都应该有 (i , e) 通过

错误：elemid 未定义

@JohnBeasley 真的不应该这样，你能把你使用的 JS 和演示 html 代码贴在这里jsfiddle.net，保存然后粘贴下面生成的链接

@JohnBeasley 我的错，在elemid之前应该有一个#