Плагин проверки jQuery в ASP.NET Web Forms

Question

Я действительно хотел бы использовать плагин проверки jQuery в моем приложении ASP.NET Web Forms (не MVC). Я нахожу это проще, чем везде добавлять валидаторы asp и устанавливать для каждого из них элемент управления для проверки.

У меня просто возникают некоторые проблемы при установке класса, подобного этому классу = "обязательный адрес электронной почты", который, я думаю, как-то связан с наличием тега формы в основном теге формы.

У меня также возникают проблемы при вызове jquery validate с использованием имен, которые искажаются в элементе управления 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>

потому что это

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

отображается как

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

и калечит имя. Я могу получить ClientID, используя <%=tbUsername.ClientID %>, но это не работает с ClientName

Кто-нибудь имел какой-либо успех, используя плагин валидатора jquery с asp.net? Если так, то как насчет использования нескольких форм во многом похоже на использование отдельных групп проверки?

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

Таким образом, не нужно беспокоиться о паршивых идентификаторах, генерируемых механизмом веб-форм.

Answer 2

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

Вот примеры , использующего плагин jQuery Validation с WebForms и , имитирующий концепцию групп проверки с ним. На самом деле он работает довольно хорошо, если вы сгладите пару проблем.

Answer 4

Вы можете проверить xVal.webForms здесь: http://xvalwebforms.codeplex.com/

Answer 5

Лучшее решение - использовать "<% = tbUsername.UniqueID%>" вместо tbUsername в правилах 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 6

Протестировано, что сказал Дарин Димитров, и оно отлично работает, но если вы не хотите устанавливать определенный класс для каждого из ваших полей, вы можете использовать селекторы jQuery:

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

Информация в этой статье привела меня к использованию Control.ClientID при поиске совпадения с jQuery ... Очень полезная информация ...

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

Answer 8

Я рекомендую использовать jQuery.simple.validator, его простой, легкий и настраиваемый валидатор, совместимый с веб-формами asp.net, потому что в основном он может выполнять проверки в любом контейнере, а не только

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 9

Для SharePoint 2010 Я обнаружил, что при загрузке различных пользовательских элементов управления в виде представлений (через ajax) это работает, если вы перемещаете javascript в библиотеку и не можете использовать серверные теги для идентификатора элемента управления, например:

например, #<%= tPhone.ClientID %>

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

В дополнение к этому, если вы динамически загружаете пользовательский элемент управления через Ajax, вы не можете использовать $ (document) .ready Вам нужно будет инкапсулировать jQuery в библиотеку функций, если его на странице управления пользователем на странице (событие на стороне сервера) загружается нормально, но в сценарии, когда он загружается через Ajax с панелью обновления, он не будет танцевать.

Я еще не пробовал загружать пользовательские элементы управления через jQuery, это выглядит тяжелым и, кажется, загружает всю страницу, хотя, возможно, немного быстрее или нет.

Тесты, сравнивающие методы загрузки, показали, что панель обновления работала так же быстро и приводила к таким же или меньшим размерам страниц, чем другие методы, и в основном загружала все быстрее или намного больше данных так же быстро или быстрее.

Answer 10

Отличный способ сделать это - использовать:

<% = 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"
                }, 
        }.

.......