表单验证链接字段必填

Question

我正在寻找一些客户端大小验证。 在下面，您将找到我的模板的示例。

提交此表单后，行可以为空。 但是，我想确保即使选择了一行中的一项，也要确保所有行中都有一个条目。 例如。 应该始终是Nothing或要求日期，开始时间，停止时间和课程。 （该类由另一个位置的按钮填充）。验证将用于警告个人是否缺少任何信息，如果他们提交了该信息，我们将忽略该记录，因为其不完整。

我已经研究了jquery验证，因为我们已经在项目中的其他表单上使用了它，但是我一直无法找到将行项目链接在一起的方法。

<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;
                }
            })
        })
    })