jquery 유효성 검사를 통해 최소 한 개의 입력으로 어떻게 유효성을 검사 할 수 있습니까? 이 같은

Question

내 HTML 코드 :이 같은

$(document).ready(function() { 
    $('#form-product').validate(); 
    $('[name^="test"]').each(function() { 
     console.log('test') 
     $(this).rules('add', { 
      required: true, 
      messages: { 
       required: 'Minimal 1 input' 
      } 
     }); 
    }); 
}); 

데모 및 전체 코드 :이 같은

<form method="post" id="form-product"> 
    <input type="text" id="test-1" name="test[1]" /><br> 
    <input type="text" id="test-2" name="test[2]" /><br> 
    <input type="text" id="test-3" name="test[3]" /><br> 
    <input type="text" id="test-4" name="test[4]" /><br> 
    <input type="text" id="test-5" name="test[5]" /><br> 
    <button type="submit">Submit</button> 
</form> 

내 자바 스크립트 코드 http://jsfiddle.net/oscar11/XTtTP/6/

내가 동적 검증을 만들고 싶어

사용자가 아무 것도 입력하지 않으면 사용자가 제출하면 "최소 1 입력"메시지가 표시됩니다

사용자가 하나의 입력란에 입력하고 제출하면 성공합니다.

내가 만든 코드는 여전히 하나의 텍스트 상자에 사용자가 입력 한 후 제출하면 여전히 메시지 "최소 1 입력"이

완벽하지 않습니다. 메시지가 없어야합니다.

코드 개선 방법은 무엇입니까?

Answer 1

코드가 모두 필요한 것입니다. 그룹에서 하나의 입력란 만 필요로하는 경우 규칙을 대신 사용해야합니다.

$(document).ready(function() { 
    $('#form-product').validate(); 
    $('[name^="test"]').each(function() { 
     console.log('test') 
     $(this).rules('add', { 
      require_from_group: [1, $('[name^="test"]')], 
      messages: { 
       require_from_group: 'Minimal 1 input' 
      } 
     }); 
    }); 
}); 

require_from_group 규칙은 additional-methods.js 파일의 일부입니다.

DEMO : jsfiddle.net/nw53mw17/

나는 또한 당신이 최신 버전의 플러그인 (들)을 사용하는 것이 좋습니다. jsFiddle은 1.10을 사용하고 있지만 최신 버전은 1.17입니다. 이것은 상당한 차이입니다.

---

편집은 : 메시지를 그룹화하기 위해

의 groups 옵션을 사용합니다. 런타임 전에 모든 이름을 알 수 없으므로 .each()을 사용하여이 매개 변수를 구성하십시오.

// dynamically construct groups parameter 
var grp = ""; 
$('[name^="test"]').each(function() { 
    grp += $(this).attr('name') + " "; 
}); 
grp = $.trim(grp); 
var myGroups = {TESTS: grp}; 

// intialize plugin with options 
$('#form-product').validate({ 
    groups: myGroups 
}); 

DEMO 2 : 양식에이 메시지의 위치가 마음에 들지 않으면 jsfiddle.net/nw53mw17/2/

, the errorPlacement option를 사용합니다.

이 플러그인의 내용은 online documentation입니다.