javascript - 使用 Parsley 禁用输入类型编号的 'step' 验证行为

Question

使用 Parsley.js html5 验证时可以禁用输入类型数字的“步骤”验证(无需更改类型文本......)

<input type="number" step="100" min="0" />

如果我将“51”放入此字段，验证将失败，因为它不是 100 的倍数(步长)。如何禁用此默认行为？

Answer 1

/*
  jQuery Optional Number Step

Version: 1.0.0
 Author: Arthur Shlain
   Repo: https://github.com/ArthurShlain/JQuery-Optional-Step
 Issues: https://github.com/ArthurShlain/JQuery-Optional-Step/issues
*/
(function ($) {

    $.fn.optionalNumberStep = function (step) {
        var $base = $(this);

        var $body = $('body');

        $body.on("mouseenter mousemove", '[data-optional-step]', function () {
            $(this).attr("step", $(this).attr('data-optional-step'));
        });

        $body.on("mouseleave blur", '[data-optional-step]', function () {
            $(this).removeAttr("step");
        });

        $body.on("keydown", '[data-optional-step]', function () {
            var key = event.which;
            switch (key) {
                case 38: // Key up.
                    $(this).attr("step", step);
                    break;

                case 40: // Key down.
                    $(this).attr("step", step);
                    break;
                default:
                    $(this).removeAttr("step");
                    break;
            }
        });

        if (step === 'unset') {
            $base.removeAttr('data-optional-step');
        }

        if ($.isNumeric(step)) {
            $base.attr('data-optional-step', step);
        }

    }

}(jQuery));

jQuery(function() {
  $('.optional-step-100').optionalNumberStep(100);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container mt-5">
  <h1 class="h3">JQuery Optional Number Step</h1>
  <div class="form-group" style="max-width: 300px">
    <label>Example</label>
    <input type="number" class="form-control optional-step-100" value="0">
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
    <small id="emailHelp" class="form-text text-muted">Dynamic step for this field is 100
      <br>You can specify any numeric value on keyboard. 
      <br>HTML5 step validation will not be applied.</small>
  </div>
  <a class="btn btn-dark btn-sm" href="https://github.com/ArthurShlain/JQuery-Optional-Step" target="_blank">View on GitHub</a>
</form>