Как вызвать HTML5 form.checkValidity во время form.onSubmit в WebForms?

Как я могу переопределить или расширить стандартную функцию javascript WebForm_OnSubmit WebForms?


Я использую типы ввода HTML5 на веб-сайте ASP.net WebForms. Пользовательский агент (например, Chrome, IE, Firefox) уже правильно обрабатывает очистку данных, альтернативный пользовательский интерфейс и т. Д.

Обычно, когда пользователь нажимает кнопку <input type="submit">, User-Agent останавливает отправку и отображает пользовательский интерфейс, чтобы указать пользователю, что их ввод будет недопустимым:

введите описание изображения здесь

Проблема с WebForms в том, что он не использует кнопку Отправить. Вместо этого все можно сделать с помощью обратной передачи javascript, а не отправки формы:

 <asp:LinkButton ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click"></asp:LinkButton>

Что при рендеринге в клиентский html становится вызовом Javascript:

WebForm_DoPostBackWithOptions(...)

Когда действительно длинная форма является тегом привязки:

<a id="Really_Long_Thing_ctl00_bbOK" 
   href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$VistaToolbar$ctl00$bbOK", "", true, "", "", false, true))'>
   Save User
</a>

Это означает, что пользовательский агент никогда не выдает пользователю подсказку о том, что введенный элемент недействителен.

Несмотря на то, что form не "отправлено", оно все равно вызывает событие onsubmit. Я могу вручную запустить проверку формы HTML5, используя что-то вроде:

isValid = form.checkValidity();

В идеале я бы зацепил это событие на моем сайте ASP.web WebForms:

Site.master

<form runat="server" onsubmit="return CheckFormValidation(this)">

<script type="text/javascript">
   function CheckFormValidation(sender) 
   {
      //Is the html5 form validation method supported?
      if (sender.checkValidity)
         return sender.checkValidity();

      //If the form doesn't support validation, then we just assume true
      return true;
   }
</script>

За исключением того, что инфраструктура WebForms удаляет обработчик метода my onsubmit и заменяет его своим собственным:

<form id="ctl01" onsubmit="javascript:return WebForm_OnSubmit();" action="UserProperties.aspx?userGuid=00112233-5544-4666-7777-8899aabbccdd" method="post">

Таким образом, мой собственный вызов отправки игнорируется. Похоже, что углубление в WebForm_OnSubmit ведет к кроличьей норе инфраструктуры валидации ASP.net WebForms:

function WebForm_OnSubmit() 
{
   if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) 
      return false;
   return true;
}

который вызывает функцию:

var Page_ValidationActive = false;
function ValidatorOnSubmit() 
{
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else 
    {
        return true;
    }
}

который вызывает, который вызывает, который использует, который проверяет.

Просто нужна проверка формы HTML5 с помощью WebForms

Проблема в том, что у WebForms есть огромная инфраструктура для проверки формы перед отправкой и отображения ошибок пользователям с помощью стандартизованного механизма (и всей инфраструктуры, которую я не использую). Он принимает на себя onsubmit событие форм и не (обязательно) использует <input type="submit"> в процессе.

Что я могу сделать, чтобы убедить веб-сайт ASP.net WebForms позволить User-Agent проверить форму?

Смотрите также


person Ian Boyd    schedule 17.09.2013    source источник
comment
Я предполагаю, что событие submit в любом случае не было бы запущено - оно срабатывает только тогда, когда пользователь отправляет форму (так что formElement.submit() не запускает его, насколько я помню), а отправка формы (не инициированная JavaScript) требует, чтобы форма имела type=submit (input или button) где угодно.   -  person PhistucK    schedule 29.03.2014
comment
Думаю, здесь можно найти хитрое решение - обмен экспертами. ru / Programming / Languages ​​/ Scripting / JavaScript /   -  person PhistucK    schedule 29.03.2014
comment
Лучшим решением было бы добавить настраиваемый валидатор - msdn.microsoft.com/en -us / library / a0z2h4sw.aspx   -  person PhistucK    schedule 29.03.2014
comment
@PhistucK Пользовательские валидаторы, похоже, работают на сервере.   -  person Ian Boyd    schedule 30.03.2014
comment
В статье также упоминаются пользовательские проверки на стороне клиента.   -  person PhistucK    schedule 30.03.2014
comment
Пользовательские валидаторы @PhistucK - это вещь ASP.NET MVC, это веб-формы.   -  person shawty    schedule 06.07.2014
comment
@shawty - в статье никоим образом не упоминается MVC, но упоминаются веб-формы - пошаговое руководство: проверка ввода данных пользователем на странице веб-форм, поэтому я не уверен, что вы здесь имеете в виду.   -  person PhistucK    schedule 06.07.2014
comment
@PhistucK, ничего страшного, я просто комментировал, что пользовательские валидаторы доступны только в приложении MVC, в веб-формах, которые не называются пользовательскими валидаторами, он называется API проверки сервера, это не значит, что он не используется, однако, как и все, что вы .NET может добавлять сборки MVC в приложение Web-Forms и давать себе возможность использовать пользовательские валидаторы, но пользовательские валидаторы как вещь недоступны в Web-FOrms только в MVC   -  person shawty    schedule 07.07.2014
comment
@shawty - Я все еще не согласен с вашим комментарием, поскольку на связанной странице конкретно говорится о веб-формах и используется термин пользовательские валидаторы как часть веб-форм.   -  person PhistucK    schedule 07.07.2014
comment
@PhistucK - пожалуйста, не соглашайтесь :-) У меня нет проблем с этим, но факт не меняет того факта, что пользовательские валидаторы относятся к технологическому уровню, реализованному Microsoft, недоступному в веб-формах, только API проверки сервера, если только вы делаете дополнительные необычные шаги, чтобы их использовать.   -  person shawty    schedule 07.07.2014


Ответы (1)


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

Перехватить обработчик при отправке легко, вам просто нужно немного подумать творчески.

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

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

Шаг 1

Создайте НОВЫЙ проект веб-форм на C # (вы можете сделать это в VB, если хотите, но я помещаю свои примеры как C #), после создания вашего проекта щелкните правой кнопкой мыши ссылки на ваше приложение, перейдите в NuGet и установите JQuery.

Это можно сделать без JQuery и просто использовать собственные методы, но сегодня воскресенье, и я сегодня ленив :-)

Шаг 2

Добавьте новую веб-форму в свой проект (используя «Добавить новый элемент») и назовите ее «Default.aspx», добавьте в эту форму текст, текстовое поле, кнопку и метку.

ваш код должен выглядеть примерно так:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jsvalidation.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    Please enter your name :
    <asp:TextBox ID="txtName" runat="server" data-jsname="username"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit"     />
  </div>
  <asp:Label runat="server" ID="lblResult">...</asp:Label>
  </form>

</body>
</html>

Затем нажмите F7 (или дважды щелкните кнопку), чтобы перейти к редактору кода для вашей формы.

Шаг 3

Добавьте свой код для обработчика кнопок в свой код. Если вы делаете то же самое, что и я, ваш код должен выглядеть примерно так:

using System;

namespace jsvalidation
{
  public partial class Default : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {}

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
      if(Page.IsPostBack)
      {
        lblResult.Text = "Well hello there " + txtName.Text;
      }
    }
  }
}

На этом этапе вы можете проверить работу, нажав F5, и все, что вы вводите (или не вводите) в текстовое поле, должно появиться с сообщением в метке ниже, когда вы нажимаете кнопку отправки.

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

Шаг 4

Как я сказал минуту назад, вам нужно мыслить вне рамок веб-форм.

Это означает, что вам нужно запустить перехват ПОСЛЕ того, как страница была отрисована и отправлена ​​в браузер.

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

Чтобы ваш код запускался после него, вам нужно поместить свой скрипт в КОНЕЦ вывода html, чтобы он выполнялся последним.

добавьте следующий код непосредственно перед закрывающим тегом основного текста, но ПОСЛЕ закрывающего тега формы

<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">

  $(document).ready(function() {

    $('form').submit(function() {

      var uninput = $('input[data-jsname="username"]');
      var username = uninput.val();

      if (username == "")
      {
        alert("Please supply a username!");
        return false;
      }

    });

  });

</script>

Наиболее проницательные из вас сразу заметят, что я не вызываю API проверки HTML5, причина в том, что я пытаюсь сделать этот пример простым.

Где я проверяю значение имени пользователя, это важная часть.

Все, что имеет значение, - это анонимная функция, в которой я выполняю проверку, и возвращает true или false. (True - значение по умолчанию, если вы ничего НЕ возвращаете)

Если вы вернете false, вы предотвратите повторную публикацию, что позволит вам использовать любой JS-код, который вам нужен, чтобы изменить поля формы с помощью API проверки HTML5.

Лично я предпочитаю использовать bootstrap (см. Диапазон электронных книг без syncfusion для моей книги Bootstrap 2, и скоро будет выпущена книга Bootstrap 3), где вы можете использовать специальные классы разметки и css во фреймворке, такие как "has-errors «правильно раскрасить вещи.

Что касается выбора компонентов с помощью JQuery, здесь есть 2 вещи, на которые тоже нужно обратить внимание.

  • 1) У вас НИКОГДА не должно быть более одной формы на странице веб-форм, на самом деле, если я правильно помню, ваше приложение не сможет скомпилироваться, если вы это сделаете, или, в лучшем случае, оно обязательно вызовет исключение во время выполнения.

  • 2) Поскольку у вас когда-либо была только одна форма, тогда вы можете быть очень уверены в том, что общий селектор 'form' в JQuery будет выбирать только вашу основную форму (независимо от идентификатора, имени, отсутствия или размера) и добавив к нему обработчик onsubmit, всегда будет прикреплять этот после, когда веб-формы этого не делают.

  • 3) Поскольку веб-формы могут (и обычно это делают) искажать имена идентификаторов, обычно проще использовать «атрибуты данных» для добавления пользовательских битов к вашим тегам. Фактическая проверка на стороне ASP.NET js выполняет тот же самый трюк, позволяя JS-коду и .NET-коду успешно сосуществовать на одной странице. Есть способы указать .NET, как называть идентификаторы, но обычно вам приходится устанавливать множество параметров в разных местах, и очень легко пропустить один. Использование «атрибутов данных» и синтаксиса селектора атрибутов JQ - гораздо более безопасный и простой в управлении способ достижения того же.

Резюме

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

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

person shawty    schedule 06.07.2014