文本字段驗證使用jQuery

我有5行5文本字段這樣的..文本字段驗證使用jQuery

<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>

這裏所有領域都是可選的。我想提出的驗證，如果用戶想要輸入數值喜歡他..不能跳過行之間......如果他想爲一個文本字段中輸入值，以前的文本域的值必須..

驗證將在您提交表單

來源

2011-09-02 maaz

這是實際生成的HTML代碼？看起來您正在使用GWT或其中'textField'稍後將被替換爲標準HTML''。 –

是的..它的Gsp（groovy服務器頁面） – maaz

嘗試用這個代碼來完成：

$(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

來源

2011-09-02 12:16:16

它更強大和更靈活的方式來對錶單的提交事件進行驗證，而不是提交按鈕的單擊事件 - 它將處理驗證，無論表單如何提交。 – Beejamin

@Beejamin，我從來沒有用過提交事件，所以我不能就這個問題多說。你能否指出我的文章/頁面來解釋這些？將幫助我理解點擊和提交驗證方面的差異。 –

基本上，在表單的級別提交作品 - 所以，無論是通過單擊按鈕，按下按鈕還是以編程方式（通過另一個javascript）提交表單，事件都會觸發，並且您可以獲得有機會做你的驗證。如果您將驗證附加到單擊事件，則需要確保始終附加到所有按鈕，並且不要以任何其他方式提交表單。您仍然可以使用所有相同的代碼，只需使用submit事件觸發它即可。 – Beejamin

工作的例子，你會得到通過防止在沒有在前一個值的字段輸入一個更好的用戶體驗？如果默認情況下除第一個字段以外的所有字段都被禁用，則可以在blur事件上啓用下一個字段。

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

來源

2011-09-02 12:31:13

我實際上會隱藏其他人（除非是下一個會包含描述性文本，只要用戶開始輸入就會消失（然後會出現下一個框）。 – jcuenod

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

來源

2011-09-02 12:39:35 Patrick

文本字段驗證使用jQuery

回答

相關問題