ASP.Net + jQuery + плагин проверки jQuery + UpdatePanel + nyroModal - успешное срабатывание на каждом поле!

Question

У меня есть форма, содержащая список полей ввода, которые пользователь заполняет ценами (числами). Я установил их классы css на "required" и "number", чтобы плагин проверки jQuery проверил их соответствующим образом. Все это работает на отлично. Ошибки отображаются, когда каждое поле либо не является числом, либо отсутствует значение и т. Д.

Вся эта форма фактически находится во всплывающем окне модели nyroModal (плагин jQuery). Но это не должно иметь значения, это просто веб-форма.aspx. В рамках этого я также использовал UpdatePanel и поместил все внутри, потому что моя форма по сути двухэтапный процесс. Есть несколько основных шагов, которые пользователь должен выполнить на первой "странице" формы. Когда это проверяется и работает, я просто скрываю / показываю некоторые элементы в UpdatePanel, чтобы показать пользователю следующую "страницу" формы, которая представляет собой все поля ввода текстового поля цены, как описано выше.

Я использую ImageButton в качестве триггерной точки для проверки формы. По умолчанию, если вы просто оставите ImageButton таким, какой он есть, .Net запустит обратную передачу, AJAX обратную передачу в моем случае, потому что все это происходит внутри UpdatePanel. Что опять-таки желательно. Я не хочу уродливый полный постбэк по понятным причинам.

После долгих чтений мне понадобился способ присоединиться к PageRequestManager.Net в javascript, чтобы я мог перехватывать, когда.Net хотел сделать обратную передачу, основываясь на том, успешно ли jQuery проверил форму или нет. Так что моя логика гласит: по умолчанию не разрешать обратные передачи, но когда jQuery успешно проверяет форму, установите переменную, которая сообщает, что обратные передачи теперь разрешены, а затем при следующей попытке обратной передачи она будет проходить. И, следовательно, отображать успех для пользователя.

Это вроде все работает достаточно хорошо, но есть одна последняя проблема.

Опция validate({success}) плагина jQuery, по-видимому, неправильно запускается после успешной проверки каждого отдельного поля, а не всей формы. Т.е., если я введу число в любое из полей ввода цены, эта опция успеха сработает и установит для моей переменной cancelPostback значение false, что, в свою очередь, означает, что форма теперь отправляется, даже если она не была проверена, просто потому, что одно поле был действительным. Я ожидал, что эта опция validate({success}) будет срабатывать только после проверки всей формы.

Я неправильно истолковал это, и на самом деле он делает то, что должен был быть? Если так, то как я могу просто установить для моей переменной cancelPostback значение true ТОЛЬКО при проверке ВСЕЙ ФОРМЫ?

Спасибо огромное за любую информацию или хедз-ап.

Мой код jQuery для реализации проверки и перехвата события обратной передачи.Net выглядит следующим образом:

<script type="text/javascript">
    // By default, don't allow Postback until we've successfully validated our form on the client-side.
    var cancelPostback=true;

    // Every single time the page loads, including every single AJAX partial postback
    function pageLoad()
    {
        // Reset the value to say that "We don't allow Postbacks at this stage"..
        cancelPostback=true;

        // Attach client-side validation to the main form
        $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } });

        // Grab a reference to the Page Request Manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onEachRequest);

        alert("Page Load");
    }

    // Our own custom method to be attached to each new/future page request..
    function onEachRequest(sender, args)
    {
        alert("About to cancel? " + cancelPostback);
        // Check to see if we need to Cancel this Postback based on Conditional Logic within this page..
        args.set_cancel(cancelPostback);
    }
</script>

Answer 1

Я бы предложил посмотреть опции submitHandler и invalidHandler. Один или другой должен работать на то, что вы хотите. Я думаю, что наилучшим способом было бы разрешить обратные передачи по умолчанию и установить для cancelPostback значение true в invalidHandler. Кроме того, вы можете написать свой собственный submitHandler, который напрямую вызывает __doPostBack и заменяет отправку через ImageButton.

Answer 2

У меня были проблемы с вашим решением, потому что все браузеры, кроме IE, запускали функцию "onEachRequest" ДО функции submitHandler() валидатора jQuery. Я придумал более элегантное решение, которое просто отменяет обратную передачу в случае сбоя проверки, а не полагается на предварительно заданную переменную.

  Sys.Application.add_init(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(onEachRequest);
  }); 

  function onEachRequest(sender, args) {
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) {
      args.set_cancel(!$('#aspnetForm').valid());
    }
  }

Answer 3

Спасибо кучам tvanfosson за оперативную помощь.

Ок обнови:

Я перебирал все больше и больше ссылок и в итоге нашел документацию для "успеха". Документация на собственной домашней странице плагина ужасна и пропускает многие ключевые функции:) Но на официальной странице jQuery это "лучше". Опция "success" предназначена для запуска каждый раз, когда отдельное поле успешно проверено. Так что это сработало по проекту, и я ошибочно предполагал, что он сработает только тогда, когда вся форма будет действительной.

Я попробовал твою недействительную идею Хэндлера. Мне понравилась эта идея. Одна проблема, с которой я столкнулся, заключалась в том, что обратная передача ImageButton все равно ВСЕГДА запускается первой, поэтому она начнет отправлять обратно до запуска кода invalidHandler. Таким образом, обратная передача все равно будет продолжаться, затем после этого invalidHandler отключит будущие обратные передачи, к сожалению, они запускаются в неправильном порядке. Но кроме этого, он показал все признаки того, что является идеальным решением.

Затем я пошел другим путем, пытаясь использовать метод submitHandler, т.е. обратный. Опять же, это вызвало некоторые проблемы с порядком, потому что постбэк сначала снова сработает, но будет заблокирован, а затем submitHandler разрешит будущие обратные передачи, но было уже слишком поздно, поэтому этот обратный запрос был пропущен. Вам придется дважды нажать кнопку, чтобы заставить ее работать.

Итак, последнее полукладкое решение, которое не так уж плохо, если честно, было:

Я изменил эту строку на: // Присоединить проверку на стороне клиента к основной форме $ ("#<% = form1.ClientID%>"). Validate({ submitHandler: function() { PreventPostback = false; __doPostBack('UpdatePanel1'), ''); } });

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

Я удалил методы событий из-за ImageButtons и создал новый метод в коде на стороне сервера, который называется "DoPostBackLogic()", который вызывается только при обратной публикации страницы, что, я знаю, должно быть из этой логики проверки, потому что это единственный постбэк, который может произойти в моей форме. Тогда вся логика скрытия / показа / сохранения происходит для меня. Это означает, что когда я вручную вызываю __doPostBack, я могу просто использовать идентификатор UpdatePanel и не беспокоиться о том, чтобы имитировать определенный ImageButton и т. Д.

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

Так что это, по сути, ваше второе решение, еще раз спасибо за прослушивание и обмен!:)