Шаги jQuery останавливаются на следующем шаге, если ввод неверен - PullRequest
Новая
       45

Шаги jQuery останавливаются на следующем шаге, если ввод неверен

0 голосов
/ 12 декабря 2018

У меня есть простая форма с шагами jquery и проверкой jquery.

У меня много полей с определенным форматом (пример: принимаю только одно из этих чисел /^(6|8|10|12)$/).

IЯ использую регулярное выражение для проверки формата ввода, чтобы пользователь знал, что что-то не так. На данный момент неправильный формат просто принимает красный цвет, но нажав кнопку далее, пользователь может перейти к следующему шагу.

СейчасЯ хочу запретить следующий шаг, если ввод не в правильном формате.

Вот перо для иллюстрации формы https://codepen.io/zounars/pen/MZYxKB

<!-- Thanks to Pieter B. for helping out with the logistics -->
<div class="container">
<form id="contact" action="#">
<div>
    <h3>Account</h3>
    <section>
        <label for="userName">User name *</label>
        <input id="userName" name="userName" type="text" class="required">
        <label for="specialNumber">Special number *</label>
        <input id="specialNumber" name="specialNumber" type="text" class="required">
        <p>(*) Mandatory</p>
    </section>

    <h3>Profile</h3>
    <section>
        <label for="name">First name *</label>
        <input id="name" name="name" type="text" class="required">
        <label for="surname">Last name *</label>
        <input id="surname" name="surname" type="text" class="required">
        <p>(*) Mandatory</p>
    </section>
    <h3>Hints</h3>
    <section>
        <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Foobar</li>
        </ul>
    </section>
    <h3>Finish</h3>
    <section>
        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
    </section>
</div>


var form = $("#contact");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
    confirm: {
        equalTo: "#password"
    }
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{

    form.validate().settings.ignore = ":disabled,:hidden";
    return form.valid();

},
onFinishing: function (event, currentIndex)
{
    form.validate().settings.ignore = ":disabled";
    return form.valid();
},
onFinished: function (event, currentIndex)
{
    alert("Submitted!");
}
});

$('#specialNumber').on('keyup', function (e) {
    if (!this.value.match(/^(6|8|10|12)$/)) {       
        $(this).addClass('error-color'); // adding error class
    } else {
        $(this).removeClass('error-color'); // remove error class
    }
});

1 Ответ

0 голосов
/ 12 декабря 2018

На данный момент неправильный формат просто принимает красный цвет ...

Это потому, что вы не используете плагин проверки для этой частиВаша оценка формы.По какой-то причине вы создали обработчик событий, который делает это полностью вне параметров плагина проверки.

Теперь я хочу запретить следующий шаг, если ввод не в правильном формате.

У вас есть только правило required, благодаря class="required" для этого поля, которое автоматически выбирается плагином проверки.Поэтому, как только он заполнен, плагин проверки удовлетворен и позволяет следующий шаг.Чтобы проверить что-либо еще для этого поля, вам нужно применить соответствующие правила с помощью методов, встроенных в этот плагин.Вы не можете просто использовать событие keyup, чтобы покрасить его в красный цвет, и ожидать, что плагин проверки будет с этим что-то делать.

Вот в чем проблема ... 

$('#specialNumber').on('keyup', function (e) {
    if (!this.value.match(/^(6|8|10|12)$/)) {       
        $(this).addClass('error-color'); // adding error class
    } else {
        $(this).removeClass('error-color'); // remove error class
    }
});

С вашим пользовательскимkeyup функция, вы в основном просто делаете свой собственный проверочный тест и меняете цвет.← Как вы ожидаете, что плагин проверки справится с этим?

Удалите вашу функцию keyup.

Правильный способ - написать пользовательское правило или использовать встроенный-в правилах, в плагине проверки, и тогда все будет работать как положено. 

rules: {
    ... 
    specialNumber: {
        pattern: /^(6|8|10|12)$/  // <- use the pattern rule for regex
    }
    ....

ПРИМЕЧАНИЕ : чтобы использовать правило pattern, необходимо включить файл additional-methods.js.

Рабочая ДЕМО: jsfiddle.net / j8n0o9ty /

...