用jquery验证日程安排

Question

Hy！

我有一个工作时间表，用户可以选择哪些日子在“清单”中工作。像下面的图片：

我试图验证此时间表...如果用户选择周一上班，他必须将到达时间和离开时间。 这应该发生在整个表格中。

这样做的最好方法是什么？

韩国社交协会！

编辑：

的HTML ...

<table class="tabelaDados" id="tbEscalaSemana"> 
<thead> 
    <tr> 
     <th> 
      dia 
     </th> 
     <th> 
      Trabalha? 
     </th> 
     <th> 
      Entrada <span class="labelAvisoTela">(08:30)</span><a title="Replicar horários" href="#" 
       class="iconCopiar" id="btnCopEnt"></a> 
     </th> 
     <th> 
      Saída<span class="labelAvisoTela">(17:30)</span><a title="Replicar horários" href="#" 
       class="iconCopiar" id="btnCopSai"></a> 
     </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      Seg 
     </td> 
     <td> 
      <input id="chkSeg" type="checkbox" name="chkSeg" /> 
     </td> 
     <td> 
      <input name="txtEntSeg" type="text" id="txtEntSeg" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSeg" type="text" id="txtSaiSeg" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Ter 
     </td> 
     <td> 
      <input id="chkTer" type="checkbox" name="chkTer" /> 
     </td> 
     <td> 
      <input name="txtEntTer" type="text" id="txtEntTer" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiTer" type="text" id="txtSaiTer" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Qua 
     </td> 
     <td> 
      <input id="chkQua" type="checkbox" name="chkQua" /> 
     </td> 
     <td> 
      <input name="txtEntQua" type="text" id="txtEntQua" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiQua" type="text" id="txtSaiQua" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Qui 
     </td> 
     <td> 
      <input id="chkQui" type="checkbox" name="chkQui" /> 
     </td> 
     <td> 
      <input name="txtEntQui" type="text" id="txtEntQui" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiQui" type="text" id="txtSaiQui" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Sex 
     </td> 
     <td> 
      <input id="chkSex" type="checkbox" name="chkSex" /> 
     </td> 
     <td> 
      <input name="txtEntSex" type="text" id="txtEntSex" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSex" type="text" id="txtSaiSex" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Sab 
     </td> 
     <td> 
      <input id="chkSab" type="checkbox" name="chkSab" /> 
     </td> 
     <td> 
      <input name="txtEntSab" type="text" id="txtEntSab" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSab" type="text" id="txtSaiSab" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Dom 
     </td> 
     <td> 
      <input id="chkDom" type="checkbox" name="chkDom" /> 
     </td> 
     <td> 
      <input name="txtEntDom" type="text" id="txtEntDom" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiDom" type="text" id="txtSaiDom" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
</tbody> 

Answer 1

使用你的HTML，你可以验证这样说：

$('#tbEscalaSemana :checked').closest("tr").find('.campoHora').each(function(){ 
    if($(this).val() == "") { 
     alert("You must provide start/stop times for all days you are working!"); 
     return(false); 
    } 
});  

此找到所有选中的复选框中的表，然后为每一个，找到了内.campoHora类的父行和搜索那一排。然后它会遍历每一个这些检查以查看它是否为非空。

你可以看到它在这里工作在你的HTML：http://jsfiddle.net/jfriend00/fYdEe/

对于您的后续问题，这将检查表中的至少一个复选框被选中：

if ($('#tbEscalaSemana :checked').length == 0) { 
    // no checkboxes checked 
} 

我还添加了这到jsFiddle：http://jsfiddle.net/jfriend00/fYdEe/。

Answer 2

我想你正在使用TR和TD结构在这里。 对于每一行，您都可以检查是否选中了该复选框，然后填入输入。

$(':checked').siblings('input').each(function(){ 
if($(this).val() == "") { 
    // THROW APPROPRIATE ERROR 
} 
}); 

希望这会有所帮助。

P.S. ：使用表格的HTML代码会更容易。