動態元素的javascript驗證

3

我wrote a blog post解釋如何動態添加輸入形式，同時添加驗證規則的jQuery驗證插件。

在我的例子，它是一個頭盔訂單：

//Each set of helmet inputs gets unique IDs 
function newHelmetInputs(i){ 
var inputSet = ''; 
inputSet += '<label for="helmet'+ i +'color">Helmet '+ i +' Color</label>' 
inputSet += '<input id="helmet'+ i +'color" name="helmet['+ i +'][color]"/>' 
inputSet += '<label for="helmet'+ i +'size">Helmet '+ i +' Size</label>' 
inputSet += '<input id="helmet'+ i +'size" name="helmet['+ i +'][size]"/>' 
return inputSet; 
} 

//Actually adding them to the page 
$('#addhelmet').click(function(){ 
var i = nextNumber(); //nextNumber() is a closure - see my blog for details 
var newInputs = newHelmetInputs(i); //i is used above in IDs 
$(this).before(newInputs); 
('#helmet' + i + 'size').rules('add', {digits: true}); //matching validation rule 
});

的博客文章進入更多細節，同時還介紹瞭如何使用PHP處理此。

至於至少要填寫兩個文本框的要求，我寫了一個jQuery Validate method這個和a similar one，它們表示「要麼填寫本節中至少X個字段，要麼完全跳過該節。

因此，例如，如果您的表單允許人們點三明治，並且每個三明治都有面包和點心的輸入，您可以動態添加他們想要訂購的三明治的字段。他們不必爲三明治＃2填寫任何東西，但如果他們這樣做，他們必須給你麪包和填充類型。

來源

2010-02-02 14:56:51

+0

我已經有腳本添加更多的字段，我只需要驗證，我的元素ID和名稱是動態的，有沒有可以使用類 – Bharanikumar 2010-02-02 15:02:27

+0

進行驗證您應該能夠使用類選擇器將規則添加到jQuery Validate中。像：$（「。someclass」）。rules（「add」，{minlength：2}）; – 2010-02-02 15:17:45

+0

是否有任何特殊的規則腳本... – Bharanikumar 2010-02-02 16:07:11

0

一個簡單的方法是計算提交時非空文本框的數量。

$(function()) { 
     $('form').submit(function() { 
      if ($(this).find('input:text') 
         .filter(function() { return $(this).val() != ''; }) < 2) { 
       ... display validation errors... 
       return false; 
      } 
      return true; 
     }); 
}):

來源

2010-02-02 14:39:41 tvanfosson

+0

嗨，我的textfield類的名字是js_txt，告訴我如何使用上面的腳本驗證字段... – Bharanikumar 2010-02-02 16:11:05

+0

這是做手動驗證。提交表單時，它會計算具有值的文本輸入的數量。如果有超過兩個有值，則驗證。如果有少於兩個值框，它將運行您插入的代碼以顯示驗證錯誤並返回false，從而停止提交。 – tvanfosson 2010-02-02 17:48:43

6

使用Validation plugin你可以add rules dynamically。這裏有一個例子：

<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <script type="text/javascript" src="jquery-1.4.1.js"></script> 
    <script type="text/javascript" src="jquery.validate.js"></script> 
    <script type="text/javascript"> 
    var count = 0; 
    $(function() { 
     $('form').validate({ 
      rules: { 
       input0: { 
        required: true 
       } 
      }, 
      message: { 
       input0: { 
        required: 'This field is required' 
       } 
      } 
     }); 

     $('a').click(function() { 
      count++; 
      var newElement = $('<input type="text" name="input' + count + '" value="" />'); 
      $('form').append(newElement); 
      newElement.rules('add', { 
       required: true, 
       messages: { 
        required: 'This field is required' 
       } 
      }); 

      return false; 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <form> 
     <input type="text" name="input0" value="" /> 
     <input type="submit" value="OK" /> 
    </form> 

    <a href="#">Add input</a> 
</body> 
</html>

來源

2010-02-02 14:49:06

+0

而當「需要」的文字輸入被刪除，那麼什麼？ – tvanfosson 2010-02-02 17:49:02

+0

@tvanfosson，好點。我想調用'elementToBeRemoved.rules（'remove'）'應該完成這項工作。 – 2010-02-02 18:07:55

+0

這段代碼真的是我的預期，但如果我的猜測是正確的，你只是驗證輸入字段ID（input0），但我不知道id名稱，bcoz我的id是動態的，我也有元素刪除選項，這是不可能的猜測精確的id名稱，但類是唯一的，是否有可能使用id驗證.. – Bharanikumar 2010-02-03 07:59:36

動態元素的javascript驗證

回答

相關問題