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

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

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

Я также сталкиваюсь с проблемами при вызове проверки jquery с использованием имен, которые становятся искалеченными в asp control

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

Ответ 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.

Ответ 2

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

Ответ 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>

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 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"
                }, 
        }.

.......

Ответ 9

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

e.g #<%= tPhone.ClientID %>

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

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

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

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

Ответ 10

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

Ответ 11

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

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