Проверка формы JQuery. Отключите ввод, пока другой ввод не будет проверен

Question

Проверка формы JQuery. Отключите ввод, пока другой ввод не будет проверен

0

У меня есть форма с двумя полями ввода, и я хочу, чтобы второе поле ввода оставалось отключенным до тех пор, пока не будет выполнено первое поле.

Он работает, но не так, как я ожидаю. Что происходит, если первое поле проверяется, второе поле включено, но если я нажму во втором поле, он снова отключится. Он будет работать, только если я использую клавишу табуляции

Как я могу получить форму для работы, как я ожидаю?

    $("#bin").prop('disabled', true);
    $('#prefix').addClass('field_disabled');
    $('span').addClass('field_disabled');

    $('#toteform').bind('change keyup', function() {
        if($(this).validate().checkForm()) {
            $('#prefix').removeClass('field_disabled');
            $('span').removeClass('field_disabled');
            $('#bin').removeClass('field_disabled').prop('disabled', false);
        } else {    
            $('#prefix').addClass('field_disabled');
            $('span').addClass('field_disabled');
            $('#bin').addClass('field_disabled').prop('disabled', true);
        }
    });

    $('#form_result').hide();   

    // validate the comment form when it is submitted
    $("#toteform").validate({
        errorLabelContainer: '#errors',
        rules: {
            tote: {
                required: true,
                number: true,
                minlength: 4
            },
            bin: {
                required: true
            }
        }
    });
});

и html

<div id="main_div" class="container frame" style="text-align:center;">
        <div id="msgcontainer">
            <div id="errors"></div>
            <div id="form_result">Tote successfully added!!</div>
        </div>
        <form id="toteform" method="post" action="">
            <p><label>Tote Number:</label>
            <input type="text" name="tote" id="tote" maxlength="4"  autocomplete="off" autofocus tabindex="1" /></p>
            <p><label>Bin Number:</label></p>
            <div id="prefix"><span>J</span><input type="text" name="bin" id="bin" maxlength="4"  autocomplete="off" tabindex="2"  /></div>
            <input type="submit" name="submit" class="submit" id="submit" value="Submit tote number"  tabindex="3" />
        </form>
</div>

AdRock 03 окт. 2013, в 13:12

Источник

0

Что вы действительно должны сделать, это разделить это на две разные страницы.
Blazemonger 03 окт. 2013, в 11:18

Теги:

jquery

jquery-validate

1 ответ

Ещё вопросы

Что вы действительно должны сделать, это разделить это на две разные страницы.

Tiago · Answer 1 · 2013-10-03T10-20-00.000Z

не видя HTML, сложно, но посмотрите на этот простой пример. Fiddle в основном у меня есть 2 входа:

<input type="text" id="form_1" placeholder="here">
<input type="text" id="form_2" placeholder="disable" class="not_valid" disabled>

И вызов JQuery (например, ваш, за исключением логики проверки)

$(document).ready(function() {
  $('#form_1').bind('change keyup', function() {
     // Your validation
     var length_var = $(this).val().length;
     if(length_var > 3) {
         $('#form_2').removeAttr('disabled');     
     } else {
     }
   });
});

ура

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