文本字段验证使用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>

这里所有字段都是可选的，我想设置验证规则，例如如果用户想要输入值，则不能跳过中间的行...如果他想要为一个文本字段输入值，则前一个文本字段必须有值。

表单提交时将进行验证。

- maaz

---

这实际上是生成的HTML代码吗？看起来你正在使用GWT或类似的东西，其中textField将稍后被标准的HTML <input>替换。 - Sebastian Wramba

是的，它是GSP（Groovy服务器页面）。 - maaz

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

- Jørgen

---

我会隐藏其他的（除了下一个包含描述性文本的框，该文本将在用户开始输入后消失，然后下一个框将出现）。 - jcuenod

Answer 2

试用以下代码：

$(document).ready(function(){
    //assuming the validation fires on the click of a button
    $("#btnSubmit").click(function(){ 
        //set valid variable to true
        var blnIsValid = true;
        //loop through each of the text boxes
        $(":text[class^='number']").each(function(i){
            //start validating from the second text box
            if(i > 0) {
                var curTxtBox = $(this);
                var prevTxtBox =  $(":text[class^='number']:eq("+ (i-1) +")");
                if($.trim(curTxtBox.val()) != "" && $.trim(prevTxtBox.val()) == "") {
                    alert("Enter value for previous distance");
                    //set focus on the text box
                    prevTxtBox.focus();
                    //set valid variable to false
                    blnIsValid = false;
                    //exit the loop
                    return false;
                }
            }
        });
        return blnIsValid;
    });
});

这里有一个在jsFiddle上的工作示例

- Sang Suantak

---

在表单提交事件上触发验证比在提交按钮的点击事件上更加健壮和灵活 - 它将处理验证，无论表单如何被提交。 - Ben Hull

@Beejamin，我之前从未使用过提交事件，所以我对这个话题没有太多的了解。你能否给我指一下一个能够解释这些问题的文章或页面？这会帮助我更好地理解在验证方面单击和提交之间的差异。 - Sang Suantak

基本上，提交工作在表单级别进行 - 因此，无论如何提交表单，无论是通过点击按钮、按键或以编程方式（通过另一段JavaScript）提交，事件都会触发，并且您有机会进行验证。如果将验证附加到单击事件，则需要确保始终将其附加到所有按钮，并且永远不要以任何其他方式提交表单。您仍然可以使用完全相同的代码，只需使用提交事件触发它即可。 - Ben Hull

Answer 3

借鉴 jSang 的回答，我会这样做：

$(document).ready(function(){
    //assuming the validation fires on the click of a button
    $("#btnSubmit").click(function(){
        var haveEmpty = false;
        var blnIsValid = true;
        $(":text[class^='number']").each(function(i){
            if( $(this).val() != "" )
            {
                if( haveEmpty )
                {
                   blnIsValid = false;
                   //need to do something to let the user know validation failed here
                }
            }
            else
                haveEmpty = true;
        });
        return blnIsValid;
    });
});

- Patrick