Question

我有一个分为三个标签面板的表单。我需要有一个功能，只有当面板1中的所有必填字段都已满时，才会显示一个显示面板2的按钮。

表单元素是这样的......

    <p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-  invalid-required-field" id="billing_first_name_field">

    <label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label>

    <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="" value="">

    </p>

因此，如果未输入所需的输入字段，则不会显示提交按钮。

由于

Answer 1

你走了：我抓住第一步容器，然后遍历它的输入字段范围并验证它们不是空白。

然后我返回true或false，如果为false，则在违规输入中添加“无效”类。

function validateStep(step) {
    var $step_paragraph = $('p.form-row-' + step),
        is_valid = true;
    $('input', $step_paragraph).each(function () {
        var $this = $(this),
            input_value = $this.val();
        if (input_value.length) {
            is_valid = true;
            $this.removeClass('invalid');
        } else {
            is_valid = false;
            $this.addClass('invalid');
        }
    }
    return is_valid;
}

然后在按下的下一个按钮上实例化它：

validateStep('first');

我刚刚看到你的最后一个要求，即在填写所有字段之前没有看到提交按钮。我建议不要这样做，因为它使代码真的非常烦人，而且从用户体验的角度来看这很糟糕。我建议仅在提交时进行验证。

但如果你必须这样做，那就是它将如何发生。还要注意我正在重用validateStep函数。

$('p.form-row-first').on('keyup', 'input', function () {
     if (validateStep('first')) { //that means all fields have text
         $('submit-button-first').show(); // you will need to select your actual button
     } else { //that means not all fields have text
         $('submit-button-first').hide();
     }
}

Answer 2

这是一个可以清理的简单解决方案。 http://jsfiddle.net/nhaines888/QhRDK/ 检查输入框输入何时停止，然后确保填写完毕。如果是，则显示面板2的按钮。如果需要确保输入需要特定内容，即仅文本，数字等，也可以使用正则表达式。

<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-   invalid-required-field" id="billing_first_name_field">

<label for="billing_first_name" class="">First Name <abbr class="required"  title="required">*</abbr></label>

<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="" value="">
<button id="btn1">SHOW PANEL 2</button>
</p>

<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce- invalid-required-field" id="billing_last_name_field">

<label for="billing_last_name" class="">Last Name <abbr class="required" title="required">*</abbr></label>

<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
<button id="btn2">SHOW PANEL 3</button>
</p>

<script>
var timeoutReference;
$(document).ready(function() {
$("#billing_last_name_field").hide();
$("#btn1").hide();
$("#btn2").hide();

$('input#billing_first_name').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    if (timeoutReference) clearTimeout(timeoutReference);
    timeoutReference = setTimeout(function() {
        if(_this.val() != "") {
            $("#btn1").show();
        }
    }, 400);
});

$("#btn1").on("click", function() {
    $("#billing_last_name_field").show();        
});

});
</script>

如果表单验证失败，请隐藏提交按钮

2 个答案: