Question

我希望做一些客户端大小验证。您将在下面找到我的模板示例。

提交此表单时，行可以为空。但是我想确定一行中是否有一个项目被选中/有一个条目，所有行都有一个条目。例如。应始终存在Nothing或要求Date，Start Time，stop time和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;
}

这是我实施代码的小提琴：http://jsfiddle.net/KNDLF/

Answer 2

所以，我想出了什么：

三种方法：isRowValid()，isRowEmpty()，isRowComplete()

行必须为空或完整。

//The following code is part of my logic on continuing
  var valid = true;
  $('#payableEventTableBody tr').each(function() {
    $(this).removeClass('error');
    if (!isRowValid($(this))) {
      valid = false;
      $(this).addClass('error');
      return;
    }
  });

  if (valid) {
    $('#claimWizard').wizard('next');
  }


//The following is my validation methods
<script type="text/javascript">
  function isRowValid($tr) {
    return (isRowEmpty($tr) || isRowComplete($tr));
  }

  function isRowEmpty($tr) {
    var isEmpty = true;
    $tr.find('input, select').each(function() {
      var value = $(this).val();
      if (value != 0 && value !== '') {
        isEmpty = false;
      }
    });
    return isEmpty;
  }

  function isRowComplete($tr) {
    var isComplete = true;
    $tr.find('input, select').each(function(){
      var value = $(this).val();
      if(value === ''){
        isComplete = false;
      }
    });
    return isComplete;
  }
</script>

Answer 3

这应该是好的开始 http://jsfiddle.net/rJaPR/

$('#validate').bind('click', function(e){
        e.preventDefault();
        $('#payableEventTable tr').each(function(){
            var tr = $(this);
            var newRowValue=0;
            $(tr).find('input, select').each(function(){
                var value = $(this).val();
                switch(newRowValue){
                    case 0:
                        // first input/select
                        newRowValue = ((value!=0 && value!='') ? 1 : -1);
                        break;
                    case 1:
                        // there are some values in this row
                        if (value==0 || value=='')
                            tr.css('backgroundColor', 'red');
                        break;
                    case -1:
                        // this row should be empty
                        if (value!=0 && value!='')
                            tr.css('backgroundColor', 'red');
                        break;
                }
            })
        })
    })

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

3 个答案: