asp.net 웹 양식의 jQuery 유효성 검사 플러그인

Question

ASP.NET 웹 양식 응용 프로그램 (MVC가 아님)에서 jQuery Validation 플러그인을 사용하고 싶습니다. ASP 유효성 검사기를 어디서나 추가하고 모든 필드의 필드를 검증하기 위해 컨트롤을 설정하는 것보다 쉽습니다.

이 클래스 = "필수 이메일"과 같은 클래스를 설정할 때 메인 양식 태그 내에 양식 태그가있는 것과 관련이 있다고 생각합니다.

또한 ASP 컨트롤에서 엉망인 이름을 사용하여 jQuery Validate를 호출 할 때 문제가 발생합니다.

// validate signup form on keyup and submit
$("#signupForm").validate({
    rules: { 
        username: {
            required: true,
            minlength: 2
        }, },
    messages: { 
        username: {
            required: "Please enter a username",
            minlength: "username at least 2 characters"
        }, 
    }.

.......

        <p>
            <label for="username">
                Username</label>
            <input id="username" name="username" />
        </p>

왜냐하면 이건

<asp:TextBox ID="tbUsername"  runat="server"></asp:TextBox>

렌더링

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />

그리고 그 이름을 망쳐 놓습니다. ClientId를 사용하여 얻을 수 있습니다 <%=tbUsername.ClientID %>그러나 그것은 ClientName과 함께 작동하지 않습니다

ASP.NET과 함께 jQuery Validator 플러그인을 사용하여 성공한 사람이 있습니까? 그렇다면 별도의 검증 그룹을 사용하는 것과 같은 여러 형식을 사용하는 것은 어떻습니까?

Answer 1

확인할 수 있습니다 규칙 추가 기능, 그러나 기본적으로 여기에 할 수있는 일이 있습니다.

jQuery(function() {
    // You can specify some validation options here but not rules and messages
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        messages: { 
            required: 'Some custom message for the username required field' 
        } 
    });
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" />

이런 식으로 WebForms 엔진에서 생성 된 엉뚱한 식별자에 대해 걱정할 필요가 없습니다.

Answer 2

다음은 다음과 같습니다 WebForms와 함께 jQuery 유효성 검사 플러그인을 사용합니다 그리고 검증 그룹의 개념을 모방합니다 그것으로. 몇 가지 문제를 부드럽게하면 실제로 잘 작동합니다.

Answer 3

$("#signupForm").validate({
        rules: { 
                <%= tbUsername.UniqueID %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= tbUsername.UniqueID %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        });

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>

Answer 4

여기에서 xval.webforms를 확인할 수 있습니다. http://xvalwebforms.codeplex.com/

Answer 5

Darin Dimitrov가 말한 내용을 테스트했으며 완벽하게 작동하지만 각 필드에 특정 클래스를 설정하지 않으려면 jQuery Selectors를 사용할 수 있습니다.

$('form').validate();
$('input[id$=Username]').rules('add', { 
    required: true, 
    messages: { 
        required: 'Some custom message for the username required field' 
    } 
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" />

Answer 6

최상의 솔루션은 jQuery 규칙의 tbusername 대신 "< %= tbusername.uniqueid %>"를 사용하는 것입니다.

$("#signupForm").validate({
rules: { 
    "<%=tbUsername.UniqueID %>": {
        required: true,
        minlength: 2
    }, },
messages: { 
    "<%=tbUsername.UniqueID %>": {
        required: "Please enter a username",
        minlength: "username at least 2 characters"
    }, 
}.

Answer 7

최근에 잘 알려진 ASP.NET 유효성 검사 그룹에서 여러 양식 문제를 해결하는 XVal.webforms 용 패치 파일을 게시했습니다. 이 패치는 또한 ASP.NET 원인 Validation 속성을 지원합니다.

당신은 여기에서 읽을 수 있습니다. http://cmendible.blogspot.com/

Answer 8

이를 수행하는 가장 좋은 방법은 사용하는 것입니다.

< %= textbox.name %> 또는 < %= textbox.clientid %> 서버 항목을 참조해야 할 때마다

즉

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

또는

$("#signupForm").validate({
        rules: { 
                <%= username.Name %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= username.Name %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        }.

.......

Answer 9

을 위한 SharePoint 2010 javaScript를 라이브러리로 옮기고 제어 ID에 서버 태그를 사용할 수없는 경우 다른 USERCONTROLS (AJAX를 통해)로 다른 USERCONTROLS를 뷰 (AJAX를 통해)로드하는 것을 발견했습니다.

예를 들어 #<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{      
 required: true,      
 messages: 
 {          
  required: 'Some custom message for the username required field'      
 }  
});

또한 AJAX를 통해 사용자 컨트롤을 동적으로로드하면 $ (Document)를 사용할 수 없습니다. 준비 (Server Side 이벤트) 페이지에서 사용자 컨트롤에있는 경우 기능 라이브러리에서 jQuery를 캡슐화해야합니다. 시나리오에서는 업데이트 패널을 통해 Ajax를 통해로드되었습니다. 춤을 추지 않습니다.

나는 jQuery를 통해 USERCONTROLS를로드하려고 시도하지 않았지만, 이것은 무겁게 보이며 아마도 약간 빠르지 않더라도 전체 페이지를로드하는 것처럼 보입니다.

로딩 기술을 비교 한 테스트는 업데이트 패널이 빠르고 다른 기술과 동일하거나 작은 페이지 크기를 초래했으며 기본적으로 기본적으로 더 빠르거나 빠르게로드했습니다.

Answer 10

jquery.simple.validator를 사용하는 것이 좋습니다. 기본적으로 모든 컨테이너뿐만 아니라 모든 컨테이너에서 유효성 검사를 수행 할 수 있으므로 쉽고, 경력이 높고 사용자 정의 가능한 유효성 검사기와 호환됩니다.

https://github.com/v2msoft/jquery.simple.validator

플러그인과 문서를 확인하는 것이 좋습니다. 용법:

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>

<div id="container">
    <!-- REQUIRED FIELD -->
    <label>Required Field: </label><br/>
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>

    <input type="button" value="Validate" onclick='javascript:validate();' />
</div>


<script type="text/javascript">
    function validate() {
        $("#container").initialize();
        var ok = $("#container").validate();
        if (!ok)  alert("There are errors");
        else alert("Form is ok");
    }
</script

Answer 11

정보 이 기사에서 jQuery와 일치하는 것을 찾을 때 Control.clientID를 사용하게되었습니다 ... 매우 유용한 정보 ...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>