javascript - jquery-如何验证签名输入？

Question

我有一个表单，要求用户在注册之前输入其数字签名。如下所示:

因此，在注册之前，用户必须在提供的 Canvas 框中输入签名。在进入最后一页进行签名之前，我使用 jquery 验证来验证其他字段。

我可以验证除签名字段之外的所有字段。知道我能做什么吗？

<div class="row">
  <div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
    <canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
    <p id="signatureError" name="signatureError" style="color: red; display: none;">Please provide your signature.</p>
    <div class="p-1 text-right">
      <button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
      <button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
    </div>
    <input type="hidden" name="signature" id="signatureInput">
  </div>
</div>
<div class="row">
  <div class="col-12 mb-0 pt-2">
    <div class="text-right">
      <input type="hidden" name="registrationFor" value="customer">
      <button type="submit" id="submit" class=" btn next-button bjsh-btn-gradient text-right">Sign Up</button>
    </div>
  </div>
</div>

 var canvas = document.querySelector("canvas");
    const signatureSaveButton = document.getElementById("saveSignature");
    const signatureResetButton = document.getElementById("resetSignature");
    const signatureError = document.getElementById("signatureError");
    const signatureInput = document.getElementById("signatureInput");

    // Initialize a new signaturePad instance.
    var signaturePad = new SignaturePad(canvas);

    // Clear signature pad.
    signatureResetButton.addEventListener("click", function(event) {
      signaturePad.clear();
    });

    // Save signature pad as data url.
    signatureSaveButton.addEventListener("click", function(event) {
      if (signaturePad.isEmpty()) {
        signatureError.style.display = "block";
      } else {
        signatureUrl = signaturePad.toDataURL();
        signatureInput.value = signatureUrl;
      }
    });

    // Validate registration tab before moving to the next tab
    $("#register-form").validate({
      rules: {
        email: {
          required: true,
          // Specify that email should be validated
          // by the built-in "email" rule
          email: true
        },
        password: {
          required: true,
          minlength: 8,
        },
        password_confirmation: {
          required: true,
          minlength: 8,
          equalTo: "#password"
        },
        full_name: {
          required: true
        },
        nric: {
          required: true
        },
        address_1: {
          required: true
        },
        address_2: {
          required: true
        },
        address_3: {
          required: true
        },
        postcode: {
          required: true
        },
        city: {
          required: true
        },
        state: {
          required: true
        },
        contact_number_home: {
          required: true
        },
        contact_number_mobile: {
          required: true
        },
        existing_customer: {
          required: true
        },
        signatureError: {
          required: true
        },
      },
      messages: {
        email: {
          required: "Please enter an email",
          email: "The email is not valid"
        },
        password: {
          required: "Please enter a password",
          minlength: "Password must be minimum of 8 characters"
        },
        password_confirmation: {
          required: "Please confirm your password",
          minlength: "Passmust must be minimum of 8 characters",
          equalTo: "Password must be same as above"
        },
        full_name: {
          required: "Please enter your full name"
        },
        nric: {
          required: "Please enter your identity card number"
        },
        address_1: {
          required: "Please enter your address"
        },
        address_2: {
          required: "Please enter your address"
        },
        address_3: {
          required: "Please enter your address"
        },
        postcode: {
          required: "Please enter your postcode"
        },
        city: {
          required: "Please select your city"
        },
        state: {
          required: "Please select your state"
        },
        contact_number_home: {
          required: "Please enter your home number"
        },
        contact_number_mobile: {
          required: "Please enter your mobile number"
        },
        signatureError: {
          required: "Please provide your signature"
        },
      }
    });

    // validate fields in 1st tab
    $('#next-btn').click(function() {
      if ($("#register-form").validate().element('#email') && $("#register-form").validate().element('#password') && $("#register-form").validate().element('#password-confirm')) {
        nextTab.find('a').trigger('click');
      } else {}
    });

    // validate fields in 2nd tab
    $('#next-btn2').click(function() {
      if ($("#register-form").validate().element('#full_name') && $("#register-form").validate().element('#nric') && $("#register-form").validate().element('#address_1') && $("#register-form").validate().element('#address_2') && $("#register-form").validate().element('#address_3') && $("#register-form").validate().element('#postcode') &&
        $("#register-form").validate().element('#city') && $("#register-form").validate().element('#state') && $("#register-form").validate().element('#contact_number_home') &&
        $("#register-form").validate().element('#contact_number_mobile') && $("#register-form").validate().element('#existing_customer')
      ) {
        nextTab.find('a').trigger('click');
      } else {}
    });

    // validate signature input in 3rd tab
    $('#submit').click(function() {
      if ($("#register-form").validate().element('#signatureError')) {
        alert("Success");
      } else {
        alert("Failure");
      }
    });

Answer 1

如果您使用signature_pad作者:Szymon Nowak 那么看来您的设置正确。

编辑:好的，我将签名字段作为验证的一部分。您不需要忽略隐藏字段。

不要验证错误消息，哈哈。验证实际字段。

此外，我还添加了一个自定义验证器来处理验证签名板，但由于它在您单击“保存”时设置隐藏签名字段的值，因此我们只需要验证签名。

有用的链接

• https://jqueryvalidation.org/documentation/
• https://www.sitepoint.com/basic-jquery-form-validation-tutorial/
• jQuery Validate - Enable validation for hidden fields

<小时/>

示例

let $form = $("#register-form");
let canvas = document.querySelector('.signature-pad');
let signatureSaveButton = document.getElementById('saveSignature');
let signatureResetButton = document.getElementById('resetSignature');
let signatureInput = document.querySelector('input[name="signature"]');

// Initialize a new signaturePad instance.
let signaturePad = new SignaturePad(canvas);

// Clear signature pad.
signatureResetButton.addEventListener('click', function(event) {
  signaturePad.clear();
  signatureInput.value = '';
  event.preventDefault();
  return false; // prevent submission...
});

// Save signature pad as data url.
signatureSaveButton.addEventListener('click', function(event) {
  let signatureBlank = signaturePad.isEmpty();
  if (!signatureBlank) {
    signatureUrl = signaturePad.toDataURL();
    signatureInput.value = signatureUrl;
    $("div.error-messages span").html(''); // Clear messages
  }
  $(signatureInput).valid(); // Call validation on the field after hitting "Save"
  event.preventDefault();
  return false; // prevent submission...
});

// Not used, because this field has no name. Also, we want to use this
// to set the underlying (hidden) signature field...
$.validator.addMethod('signaturePresent', function(value, element) {
  console.log('Checking...');
  return this.optional(element) || signaturePad.isEmpty();
}, "Please provide your signature...");

// Validate registration tab before moving to the next tab
$form.validate({
  ignore: [], // This is important! We want to validate hidden fields.
  rules: {
    signature: {
      required: true
    }
  },
  messages: {
    signature: {
      required: "Please provide your signature"
    }
  },
  submitHandler: function(form) {
    $("div.error-messages span").html(''); // Clear messages
    console.log('Submitting form...');
    //form.submit(); <-- UNCOMMENT TO ACTUALLY SUBMIT
  },
  invalidHandler: function(event, validator) {
    console.log('INVALID!');
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? 'You missed 1 field. It has been highlighted'
        : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error-messages span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

body {
padding: 2em;
}

.signature-pad {
  display: block;
  border: thin solid grey;
  margin: 0 auto;
  margin-bottom: 0.5em;
}

.hidden {
  display: none !important;
}

form .error {
  color: #F00;
}

.error-messages {
  text-align: center;
  font-size: smaller;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<form id="register-form">
  <div class="row">
    <div class="col-md-6 text-center">
      <label for="signatureInput">Signature</label>
    </div>
    <div class="form-group text-center">
      <canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
      <div>
        <button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
        <button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
      </div>
      <input type="hidden" name="signature" id="signatureInput">
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 text-right">
      <input type="hidden" name="registrationFor" value="customer">
      <button type="submit" id="submit" class=" btn next-button bjsh-btn-gradient text-right">Sign Up</button>
    </div>
  </div>
</form>
<div class="error-messages"><strong>Messages:</strong><br/><span></span></div>