Disable 'step' validation behavior on input type number with Parsley

Question

It is possible to disable 'step' validation on input type number when using Parsley.js html5 validation (without change to type text....)

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

If I put "51" Inti this field, validation fail because It's not a multiple of 100 (step). How can I disable this default behavior ?

Because it's help user using native controls to increase/decrease value 100 by 100 instead of typing value themself... — Aure77, Oct 02 '17 at 15:24
Then try to use novalidate attribute of form https://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements — artgb, Oct 02 '17 at 15:30
novalidate will also disable "min" constraint that I want to keep. — Aure77, Oct 04 '17 at 12:41

score 0 · Answer 1 · answered Mar 22 '19 at 07:04

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

Disable 'step' validation behavior on input type number with Parsley

1 Answers1