동적 요소에 대한 자바 스크립트 유효성 검사

동적으로 생성 된 텍스트 입력을 어떻게 확인할 수 있습니까?동적 요소에 대한 자바 스크립트 유효성 검사

새로운 링크를 만드는 "추가 링크"와 링크를 제거하는 링크가 있습니다. 각 ID에는 고유 ID가 있습니다.

또한 최소한 두 개의 텍스트 상자를 채워야합니다.

2010-02-02 Bharanikumar

I 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을 작성하고 "이 섹션의 필드 중 적어도 X 개를 채우거나 섹션을 완전히 건너 뜁니다."라고 말한 a similar one을 작성했습니다.

양식을 사용하여 사람들이 샌드위치를 주문할 수 있고 각 샌드위치에 빵 및 채우기 입력이 있으면 주문하려는만큼의 샌드위치에 대해 필드를 동적으로 추가 할 수 있습니다. 그들은 샌드위치 # 2를 위해 무엇이든 기입 할 필요는 없지만, 그렇게한다면 빵과 채우는 유형을 모두 제공해야합니다.

출처

2010-02-02 14:56:51

더 많은 필드를 추가하기위한 스크립트가 이미 있습니다. 유효성 검사 만 필요하고 요소 ID와 이름이 동적입니다. – Bharanikumar

클래스 유효성 검사를 할 수있는 능력 클래스 선택기를 사용하여 jQuery Validate에 규칙을 추가 할 수 있어야합니다. $ (". someclass") 규칙 ("add", {minlength : 2}); –

규칙을위한 특별한 스크립트가 있습니다 ... – Bharanikumar

간단한 방법은 제출시 비어 있지 않은 텍스트 상자의 수를 세는 것입니다. (가) Validation plugin 당신이 add rules dynamically을 할 수 사용

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

안녕하세요, 내 텍스트 필드 클래스 이름은 js_txt입니다. 위의 스크립트로 필드를 계산하는 방법을 알려주세요 ... – Bharanikumar

이것은 수동 유효성 검사를 수행하고 있습니다. 양식이 제출되면 값이있는 텍스트 입력 수가 계산됩니다. 두 개 이상의 값이있는 경우 유효성을 검사합니다. 값이있는 상자가 2 개 미만인 경우 유효성 검사 오류를 표시하기 위해 삽입하는 코드를 실행하고 false를 반환하여 제출을 중단합니다. – tvanfosson

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

"필수"텍스트 입력이 제거되면 무엇을 할 수 있습니까? – tvanfosson

@ tvanfosson, 좋은 지적. 'elementToBeRemoved.rules ('remove')를 호출하면 작업을 수행해야합니다. –

스 니펫은 실제로 예상 한 것입니다.하지만 내 추측이 맞으면 U는 입력 필드 ID (input0)의 유효성을 검사하지만 ID 이름을 알지 못합니다. 내 ID가 동적이며 또한 요소 제거 옵션이 있습니다. 가능하지 않습니다. 정확한 ID 이름을 추측하지만 클래스는 고유합니다. ID를 사용하여 유효성을 검사 할 수 있습니까? – Bharanikumar

동적 요소에 대한 자바 스크립트 유효성 검사

답변

관련 문제