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

我有一个窗体被分成三个标签面板。我需要一个功能，它将显示一个按钮，只有当面板1中所有必填字段都已满时才会显示面板二。如果表单验证失败，隐藏提交按钮

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

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

所以，如果没有输入所需的输入字段的提交按钮不会显示。

感谢

来源

2014-01-19 user2186701

http://thecodemine.org / –

在这里你去：我抓住了第一步容器，然后循环通过它的输入域的范围，并确认他们是不是空白。

然后我返回true或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(); 
    } 
}

来源

2014-01-19 06:55:54

这里是一个简单的解决方案，你可以清理。 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>

来源

2014-01-19 07:00:52 Naterade

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

回答

相关问题