3

jquery.validate.jsを使用して、フォーム内の複数のフィールドをsmizek の signature_padとともに検証しています。他のすべての入力フィールドが検証されると同時に、html キャンバス (署名パッド) に何かが描画されているかどうかを検証したいと考えています。

残念ながら、jquery 検証 submithandler に関数を追加して、キャンバスに署名があるかどうかを確認するだけでは十分ではありません。これは、他のすべての必須フィールドが満たされた場合にのみトリガーされるためです。メソッドを 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 検証だけでなく、両方の条件が満たされない限り、フォームの送信を停止するにはどうすればよいですか?

4

2 に答える 2

5

jquery 検証 submithandler で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;

于 2014-09-20T22:42:32.530 に答える
2

これを処理するために、カスタム検証を使用して隠しフィールドを作成しました。

非表示フィールドの値を base64 でエンコードされた署名に設定する JavaScript。

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

署名パッド 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-methods.js に追加されたカスタム検証コード(ダウンロード リンクはそのページにあります)

jQuery.validator.addMethod("signature", function(value, element, options) {
    if( signaturePad.isEmpty()){
            return false;            
        }
    return true;
}, "Your signature is required");
于 2016-04-17T22:56:40.657 に答える