it-swarm.com.ru

плагин проверки jQuery в веб-формах ASP.NET

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

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

Я также сталкиваюсь с проблемами при вызове 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? Если так, то как насчет использования нескольких форм, так же, как использование отдельных групп проверки?

43
eiu165

Вы можете проверить правила добавления функции , но в основном вот что вы можете сделать:

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

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

46
Darin Dimitrov

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

11
Dave Ward
$("#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>
11
1984kg

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

4
Carlos Mendible

Лучшее решение - использовать «<% = 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"
    }, 
}.
2
Jackie

Протестировано то, что сказал Дарин Димитров, и оно отлично работает, но если вы не хотите устанавливать определенный класс для каждого из ваших полей, вы можете использовать селекторы 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" />
2
C.Hoffmann

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

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

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

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

.......

0
Adam

Недавно я опубликовал файл патча для xVal.WebForms, который решает проблему с несколькими формами, опираясь на хорошо известную группу проверки ASP.Net. Этот патч также поддерживает свойство ASP.Net CausesValidation.

Вы можете прочитать об этом здесь: http://cmendible.blogspot.com/

0
Carlos Mendible

Для 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, это выглядит тяжелым и, кажется, загружает всю страницу, хотя, возможно, немного быстрее или нет. 

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

0
jason robertson

Я рекомендую использовать 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
0
Christian