jQuery Validation plugin trong ASP.NET Web Forms

Question

Tôi thực sự thích sử dụng jQuery Validation plugin trong ứng dụng ASP.NET Web Forms (không phải MVC). Tôi tìm thấy nó dễ dàng hơn so với việc thêm trình xác thực asp ở khắp mọi nơi và đặt điều khiển để xác thực trường trên tất cả chúng.

Tôi chỉ gặp một số vấn đề khi đặt lớp như lớp này = "email yêu cầu" mà tôi nghĩ có liên quan đến việc có thẻ biểu mẫu trong thẻ biểu mẫu chính.

Tôi cũng chạy vào các vấn đề khi gọi validate jquery bằng cách sử dụng tên đó trở thành nham nhở trong một điều khiển asp

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

vì đây

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

ám như

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

và mangles tên. Tôi có thể lấy ClientID bằng cách sử dụng <%=tbUsername.ClientID %> nhưng điều đó không hoạt động với ClientName

Có ai có bất kỳ thành công nào bằng cách sử dụng plugin trình xác thực jquery với asp.net không? Nếu vậy điều gì về việc sử dụng nhiều biểu mẫu giống như sử dụng các nhóm xác thực riêng biệt?

Answer 1

Bạn có thể kiểm tra các rules add function, nhưng về cơ bản đây là những gì bạn có thể làm:

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" /> 

Bằng cách này không cần phải lo lắng về các định danh crappy tạo ra bởi động cơ webforms.

Answer 2

Bạn có thể kiểm tra xVal.webForms đây: http://xvalwebforms.codeplex.com/

Answer 3

Gần đây tôi đã đăng tải một tập tin vá lỗi cho xVal.WebForms mà giải quyết vấn đề nhiều hình thức chuyển tiếp trên nổi tiếng ASP.Net xác Group. Bản vá này cũng hỗ trợ tài sản ASP.Net CausesValidation.

Yo có thể đọc về nó ở đây: http://cmendible.blogspot.com/

Answer 4

Dưới đây là ví dụ về using the jQuery Validation plugin with WebForms và emulating the concept of validation groups với nó. Nó thực sự hoạt động khá tốt một khi bạn mịn ra một vài vấn đề.

Answer 5

Tested gì Darin Dimitrov nói và nó hoạt động hoàn hảo, nhưng nếu bạn không muốn thiết lập một lớp học cụ thể cho từng lĩnh vực của bạn, bạn có thể sử dụng 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

Một cách tuyệt vời để làm này là sử dụng:

<% = textbox.Name%> hoặc <% = textbox.ClientId%> bất cứ khi nào bạn cần phải tham khảo một mục máy chủ.

ví dụ:

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

hoặc

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

.......

Answer 7

$("#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 8

Đối SharePoint 2010 Tôi tìm thấy với tải usercontrols khác nhau như quan điểm (thông qua ajax) rằng đây làm việc nếu bạn di chuyển javascript vào một thư viện và không thể sử dụng các thẻ máy chủ cho các điều khiển của id như thế này:

ví dụ #<%= tPhone.ClientID %>

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

tiếp tục đến điều này nếu bạn tự động tải một điều khiển người dùng thông qua Ajax thì bạn không thể sử dụng $ (document) .ready bạn sẽ phải đóng gói các jQuery trong một thư viện chức năng nếu nó trên trang User Control tại (server side event) tải tiền phạt của nó nhưng trong kịch bản của nó được tải thông qua Ajax với Update Panel, nó sẽ không nhảy.

Tôi chưa thử tải usercontrols qua jQuery, điều này có vẻ nặng và dường như tải toàn bộ trang mặc dù có lẽ hơi nhanh hơn hay không.

Thử nghiệm so sánh kỹ thuật tải cho thấy Bảng điều khiển nhanh và dẫn đến kích thước trang giống hoặc nhỏ hơn các kỹ thuật khác và cơ bản được tải nhanh hơn hoặc nhiều dữ liệu nhanh hơn hoặc nhanh hơn.

Answer 9

Giải pháp tốt nhất là sử dụng "<% = tbUsername.UniqueID%>" thay vì tbUsername trong các quy tắc jQuery.

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

Answer 10

tôi khuyên bạn nên sử dụng jQuery.simple.validator, validator dễ dàng, lightweigh và tùy chỉnh nó tương thích với các hình thức web asp.net, bởi vì về cơ bản nó có thể thực hiện kiểm chứng thực trong bất kỳ container, không chỉ

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

Tôi khuyên bạn nên kiểm tra plugin và tài liệu. Cách sử dụng:

<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

Thông tin in this article dẫn tôi sử dụng Control.ClientID khi tìm kiếm một trận đấu với jQuery ... thông tin Rất hữu ích ...

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