jquery - 使用 Jquery 验证文本字段

Question

我有 5 个文本字段，共 5 行，如下所示..

<div class="dt_distance_slab">
     <g:textField class ="number distanceSlab1" name="distanceSlabCost1" id = "distanceSlabCost1"  value=""/> 
  </div>
<div class="dt_distance_slab">
     <g:textField class ="number distanceSlab2" name="distanceSlabCost2" id = "distanceSlabCost2"  value=""/> 
  </div>
  <div class="dt_distance_slab">
     <g:textField class ="number distanceSlab3" name="distanceSlabCost3" id = "distanceSlabCost3"  value=""/> 
  </div>
   <div class="dt_distance_slab">
     <g:textField class ="number distanceSlab4" name="distanceSlabCost4" id = "distanceSlabCost4"  value=""/> 
  </div>
    <div class="dt_distance_slab">
     <g:textField class ="number distanceSlab5" name="distanceSlabCost5" id = "distanceSlabCost5"  value=""/> 
  </div>

这里所有字段都是可选的..我想像用户想要输入值一样进行验证..他不能跳过中间的一行...如果他想为文本字段输入值，则前一个文本字段必须有值(value)..

提交表单后将进行验证

Answer 1

通过阻止在没有先前值的字段中进行输入，您会获得更好的用户体验吗？如果默认情况下禁用除第一个字段之外的所有字段，您可以在模糊事件中启用下一个字段。

$('input:gt(1)').attr('disabled','disabled');
var fields = $('input');
$('input').blur(function(){
  var $this = $(this);
  if($this.val() != ''){
    fields.eq($this.index()+1).attr('disabled','');
  }
});