Скрыть кнопку «Отправить», если проверка формы завершена

Question

У меня есть форма, которая разделена на три панели с вкладками. Мне нужно иметь функцию, которая покажет кнопку, которая будет отображать панель два только в том случае, если все обязательные поля из панели 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> 

Так что, если требуемые поля ввода не вводятся не будет отображаться кнопка отправить.

Благодаря

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>