javascript - 根据需要表单验证链接字段

Question

我想做一些客户规模验证。您将在下面找到我的模板示例。

提交此表单时，一行为空是可以的。但是我想确定即使一行中的一个项目被选中/有一个条目，所有行都会有一个条目。例如。应该始终没有任何内容或需要日期、开始时间、停止时间和类(class)。 (该类由另一个位置的按钮填充)验证将用于警告个人是否遗漏任何内容，如果他们提交，我们将忽略不完整的记录。

我看过jquery Validation因为我们已经在我们项目的其他表单上使用它，但是，我一直无法找到将行项目链接在一起的方法。

<form>
  <table id="payableEventTable" class="table table-condensed table-striped">
    <thead>
      <tr>
        <th>Date</th>
        <th>Class/Scenario</th>
        <th>Start</th>
        <th>Stop</th>
        <th>Break</th>
      </tr>
    </thead>
    <tbody id="payableEventTableBody">
      <c:forEach begin="0" end="5" varStatus="i">
        <tr>
          <td><input type="date" class="input-small" name="claimForm.payableEvents[${i.index}].eventDate" /></td>
          <td>
            <select class="classSelect" name="claimForm.payableEvents[${i.index}].event">
              <option></option>
            </select>
          </td>
          <td><input type="text" class="input-small" name="claimForm.payableEvents[${i.index}].eventStartTime" /></td>
          <td><input type="text" class="input-small" name="claimForm.payableEvents[${i.index}].eventStopTime" /></td>
          <td>
            <select>
              <option value="0" selected>No Break taken</option>
              <option value="15">15 Minutes</option>
              <option value="30">30 Minutes</option>
              <option value="45">45 Minutes</option>
            </select>
          </td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
</form>

我们愿意使用的技术。 HTML、CSS、javaScript、jQuery(jquery 的轻量级插件)。我们还必须确保该解决方案适用于 IE8。

编辑:

我构建了一个 JSFiddle .帮助可视化。

编辑:

我想出了一个答案。但是，如果有人能够改进我的答案，简化它/让它看起来更好，我仍然愿意向那个人提供赏金。

Answer 1

这里是我的建议:为了让你的代码更清晰，你可以结合三个函数 validateRow(), isRowEmpty(), isRowComplete() 到一个更简单的 validateRow() 函数中。而且它要快得多，因为您只需要遍历所有元素并检查它们的值一次而不是两次。

我还创建了一个易于使用的 validateForm() 函数来整理内容。

validateForm() 函数现在可以在事件处理程序中使用:

// Event Handler
$('#validate').bind('click', function(e){
     e.preventDefault();
    if(validateForm()) {
        alert("next");
        //$('#claimWizard').wizard('next');
    }
});    


// Form Validation
var validateForm = function(){
    var valid = true;

    $('#payableEventTableBody tr').each(function() {
        if (validateRow($(this))) {
            $(this).removeClass("error");
        }
        else {
            valid = false;
            $(this).addClass('error');
        }
    });
    return valid;
}

var validateRow = function(row){
    var state = null,
        valid = true;

    row.find('input, select').each(function() {
        var value = $(this).val(),
            isEmpty = (value != 0 && value !== '');
        //if its the first element just save the state
        if(state === null) {
            state = isEmpty;
        }
        // if this field has not the same state as the rest
        else if(state !== isEmpty) {
            valid = false;
        }
    })   
    return valid;
}

这里是你对我的代码实现的 fiddle :http://jsfiddle.net/KNDLF/