form.validate() 대신 container.validate()에 대한 Jquery 유효성 확인

Question

우리는 많은 양식을 포함하는 새로운 umbraco 웹 사이트를 구축하고 있으며이 양식의 유효성을 검사하기 위해 Jquery 유효성 검사 플러그인을 사용하고 있습니다.

각 usercontrol (매크로)에는 서버 태그가 있기 때문에 JQuery 유효성 검사가 작동하려면 각 usercontrol에서 하나의 양식을 사용해야합니다.

하지만 우리는 각 usercontrol에서 하나의 양식을 사용하기 때문에 한 페이지에 여러 컨트롤을 추가 할 수 없습니다.

마스터 페이지에 runat = "server"가 포함 된 양식 태그를 추가 한 다음 일부 container.validate(); form.validate() 대신에. 이

<script type="text/javascript> 

    $('#regForm').validate(); 

</script> 


<div id="regForm"> 

    <input type="text" class="required" name="Name" id="txtName" runat="server"/> 

</div> 

Answer 1

유효성 검사 플러그인 같은

즉 뭔가는 <form></form> 태그 집합에 포함되는 검증 할 것 다양한 필드를 필요로한다.

http://rocketsquared.com/wiki/Plugins/Validation

그러나 양식을 "제출"할 필요없이 확인을 할 수 있습니다. 예를 들어 onkeyup: 또는 onfocusout: 처리기로 계속 수행 할 수 있습니다.

그럼 <div id="regForm">을 <form id="regForm" ... >과 같이 변경하면 유효성을 검사 할 수 있습니다.

편집 : 기본적으로

For HTML 4, 유일한 이form 속성이 action이다 필요한, 그래서 당신은 그냥이와 <div id="regForm"> </div>를 대체 할 수있는 이유가 없습니다 ...

<form id="regForm" action="#"> </form> 

Answer 2

asp.net은 runat = "server"와 함께 하나의 양식 만 가질 수 있습니다. 그러나 Sparky의 답변에 따르면 페이지에 여러 개의 양식이있을 수 있습니다. asp.net의 여러 양식에 대한 자세한 내용은 http://msdn.microsoft.com/en-us/magazine/cc164151.aspx에서 확인할 수 있습니다.

Answer 3

이 질문에 대한 답변은 늦었지만 기존 답변 중 아무 것도 받아 들여지지 않았 음을 알고 있습니다. 방금 모달 대화 상자의 양식에 포함 된 div의 유효성을 검사해야하는 비슷한 상황이 발생했습니다. 여기 내가 어떻게 해결 했는가.

<script type="text/javascript> 
    jQuery(function($) { 
    $('form').validate(); 

    $('.continue').click(function() { 
     var isValid = true; 
     var $div = $(this).closest("div"); 
     $div.find(":input").each(function() { 
      isValid = $(this).valid() && isValid; 
     }); 
     if (isValid) { 
      var $next = $div.hide().next('div'); 
      if ($next.length == 0) { 
       $(form).submit(); 
      } else { 
       $next.show(); 
      } 
     } 
    }); 
    }); 
</script> 

<form action="#"> 
    <div id="div1"> 
     <input type="text" required name="Name" id="txtName"  runat="server"/> 
     <button class="continue">Continue</button> 
    </div> 
    <div id="div2"> 
     <input type="text" required name="Address" id="txtAddress" runat="server"/> 
     <input type="text" required name="City" id="txtCity" runat="server"/> 
     <input type="text" required name="State" id="txtState" runat="server"/> 
     <input type="text" required name="Zip" id="txtZip" runat="server"/> 
     <button class="continue">Continue</button> 
    </div> 
</form>