Как я могу добавить проверку, если подпись введена с использованием проверки jquery и signature_pad?

Question

Я использую jquery.validate.js для проверки нескольких полей в моей форме вместе с подписью smizek. Я хочу проверить, если что-то рисуется на холсте html (панель подписи) в то же время все другие поля ввода проверяются.

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

Я могу проверить, существует ли подпись с помощью "signaturePad.isEmpty()". В идеале, есть способ добавить такую ​​функцию, которая происходит одновременно с любой проверкой:

    var errorExists = false;
    if( signaturePad.isEmpty()){
      if (errorExists == false){
        $( "#signature-pad" ).append( "<div id="sig-error">A signature is required</div>" );
        errorExists = true;
      }
    }else if( !signaturePad.isEmpty()) {
      if (errorExists == true){
        $('#sig-error').remove();
      }
    }

... и продолжать отправлять форму только в том случае, если удовлетворены как проверка jquery, так и подпись.

Есть ли способ получить триггер функции одновременно с другой проверкой, а не после? Как я могу остановить отправку формы, если не выполнены оба моих условия - не только проверка jquery?

Answer 1

В обработчике проверки JQuery, return false если подпись не заполнена:

    if( signaturePad.isEmpty()){
            console.log('it is empty');
            return false;            
        }

Это предотвращает отправку формы, если нет подписи.

Чтобы отобразить сообщение об ошибке для отсутствующей подписи, как и остальные сообщения об ошибках проверки jquery, привяжите функцию к щелчку отправки ввода:

    $('#submit_form').click(function(){
      if( signaturePad.isEmpty()){
        if (errorExists === false){
          $( "#signature-pad" ).append( "<div class='error' id='sig-error'>A signature is required</div>" );
          errorExists = true;
        }
      }else if( !signaturePad.isEmpty()) {
        if (errorExists === true){
          $('#sig-error').remove();
          errorExists = false;
        }
      }
    });

Объявите вашу переменную где-нибудь:var errorExists = false;

Answer 2

Я сделал скрытое поле с пользовательской проверкой, чтобы справиться с этим.

JavaScript для установки значения скрытого поля в подпись в кодировке base64.

<script type="text/javascript">
            window.onload = function() {
              $( "#application" ).submit(function( event ) {
                var canvas = document.getElementById('canvas');
                var sigData = canvas.toDataURL("image/png");
                $('#signature').attr('value', sigData);
              });
            }
          </script>

Подпись Pad HTML

<div class="m-signature-pad" id="signature-pad">
              <div class="m-signature-pad--body">
                <canvas id="canvas" width="611" height="150"></canvas>
              </div>
              <div class="m-signature-pad--footer">
                <button class="button clear" data-action="clear" type="button">Clear</button>
                <div class="description">
                  Sign above
                </div>
              </div>
            </div>

Форма HTML

<input data-rule-signature="true" id="signature" name="signature" type="hidden">

Пользовательский код проверки добавлен в jquery-validate-Additional-method.js (ссылка на скачивание находится на этой странице)

jQuery.validator.addMethod("signature", function(value, element, options) {
    if( signaturePad.isEmpty()){
            return false;            
        }
    return true;
}, "Your signature is required");

Answer 3

Используйте это:!signaturePad.IsEmpty();