如果表單驗證失敗，隱藏提交按鈕

我有一個窗體被分成三個標籤面板。我需要一個功能，它將顯示一個按鈕，只有當面板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

如果表單驗證失敗，隱藏提交按鈕

回答

相關問題