Расширение HTML 5 / JavaScript API проверки ввода

Question

Я должен работать с проверкой HTML 5 в поле номера типа ввода, которое использует атрибуты min и step и начальное значение, т. Е.

<input type="number" min="50" step="50" value="100" />

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

50, 51 ... 99 , 100, 101 ... 149 , 150, 151 ...

Могу ли я как-то "зацепить" API проверки после того, как он выполнил свою работу, и если только ошибка то, что он находит, является ошибкой шага, сбросьте допустимое условие, чтобы можно было отправить форму, в которой находится это поле?

Конечно, было бы неплохо, если бы кроме параметра строки сообщения функция element.setCustomValidity() также могла бы принять функцию обратного вызова, которая вернула пустую строку, если значение элемента прошло проверку (и) в функции обратного вызова, или вернуть непустую строку сообщения, если значение не прошло.

Answer 1

Вы можете работать с текстовым вводом и использовать атрибут шаблона, который использует регулярное выражение (RegExp) для проверки его значений следующим образом:

<form>
    <input type="text" pattern="(^[6-9][0-9]{1,}$|^[5][1-9]$)|(^((?!00|50|[a-zA-Z]).){3,}$)" title="Invalid values" required>
</form>

Редактировать 1: поскольку вы не хотите изменять тип ввода это может быть решением (используя тот же RegEx):

<script>
    window.validate50 = function(ev){
        var tar = ev.target || ev;

        // tests the value is not a 50 multiple
        if(!/(^[6-9][0-9]{1,}$|^[5][1-9]$)|(^((?!00|50|[a-zA-Z]).){3,}$)/img.test(tar.value)){

            // in this case triggers the validation using the text on html title attribute
            tar.setCustomValidity(tar.title);

            // returns false so the "submit" action is supressed
            return false;
        }
    };
</script>
<form>
    <input type="number" min="50" step="50" onchange="return validate50(this);" title="The number must not be a multiple of 50!" required>
</form>