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

StackOverflow https://stackoverflow.com/questions/619816

Вопрос

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

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

Я также сталкиваюсь с проблемами при вызове 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" />

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

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

Это было полезно?

Решение

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

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

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

Другие советы

Вот примеры использования jQuery Плагин проверки с веб-формами и Подражая концепции групп проверки с ним. На самом деле это работает довольно хорошо, если вы сгладите пару проблем. 

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

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

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

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

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

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

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

<%= текстовое поле.Имя %> или <%= текстовое поле.Идентификатор клиента %> всякий раз, когда вам нужно ссылаться на серверный элемент.

т. е.

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

.......

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

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

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

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

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top