使用Jquery驗證多行HTML表格中只有選中的行

-1

鑑於以下HTML表格是PHP頁面上表單的一部分，驗證用戶輸入的最佳做法是什麼？使用Jquery驗證多行HTML表格中只有選中的行

如果用戶檢查一行（或多行）的複選框，確保StartDate和EndDate輸入字段具有使用客戶端腳本的數據的最佳方法是什麼？

我想使用jquery，但我對jquery很新。 jQuery驗證插件是否最有意義？

<table width='100%' border='0' cellspacing='0' cellpadding='0'> 
    <tr> 
     <td> 
      <input type='checkbox' id='Product[916109]' name='Product[916109]' value='916109' class='select'> 
     </td> 
     <td> 
      <input type='text' id='ProductName[916109]' name='ProductName[916109]' value='ESY792'> 
     </td> 
     <td> 
      <input type='text' id='StartDate[916109]' name='StartDate[916109]' class='startDatePicker'> 
     </td> 
     <td> 
      <input type='text' id='EndDate[916109]' name='EndDate[916109]' class='endDatePicker'> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type='checkbox' id='Product[916110]' name='Product[916110]' value='916110' class='select'> 
     </td> 
     <td> 
      <input type='text' id='ProductName[916110]' name='ProductName[916110]' value='ESY793'> 
     </td> 
     <td> 
      <input type='text' id='StartDate[916110]' name='StartDate[916110]' class='startDatePicker'> 
     </td> 
     <td> 
      <input type='text' id='EndDate[916110]' name='EndDate[916110]' class='endDatePicker'> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type='checkbox' id='Product[916111]' name='Product[916111]' value='916111' class='select'> 
     </td> 
     <td> 
      <input type='text' id='ProductName[916111]' name='ProductName[916111]' value='ESY794'> 
     </td> 
     <td> 
      <input type='text' id='StartDate[916111]' name='StartDate[916111]' class='startDatePicker'> 
     </td> 
     <td> 
      <input type='text' id='EndDate[916111]' name='EndDate[916111]' class='endDatePicker'> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type='checkbox' id='Product[916112]' name='Product[916112]' value='916112' class='select'> 
     </td> 
     <td> 
      <input type='text' id='ProductName[916112]' name='ProductName[916112]' value='ESY795'> 
     </td> 
     <td> 
      <input type='text' id='StartDate[916112]' name='StartDate[916112]' class='startDatePicker'> 
     </td> 
     <td> 
      <input type='text' id='EndDate[916112]' name='EndDate[916112]' class='endDatePicker'> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <input type='submit' id='btnSubmit' name='btnSubmit' value='Submit'> 
     </td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

來源

2015-06-11 Bob

參考這裏編寫可運行的片段在SO - http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/或使用JSFiddle並在這裏分享你的小提琴https://jsfiddle.net/ – spiderman

這應該做的伎倆爲你所描述的用例：

var theForm = $('form'), 
    rows = theForm.find('tr'); 

theForm.on('submit', function(evt) { 
    rows.each(function(i, row) { 
    var valid = row.find('.select').is(':checked') 
      && (row.find('.startDatePicker').val() && row.find('.endDatePicker').val()) 

    if (!valid) return evt.preventDefault(); 
    }); 
});

無感裝載驗證插件，如果這就是你需要它，但如果你很可能會使用它在別處然後去爲它。

來源

2015-06-11 22:13:12

非常感謝您的幫助！ – Bob

使用Jquery驗證多行HTML表格中只有選中的行

回答

相關問題