Показать связь при заполнении всех полей ввода

Question

Я пытаюсь использовать jquery для проверки формы с динамически созданной формой поля, чтобы гарантировать, что все поля ввода были заполнены до отправки. Я хотел бы скрыть ссылку отправки до тех пор, пока все поля не будут заполнены. Это то, что у меня есть до сих пор.

$('form#form_id').change(function(e) { 
$(":input").each(function() { 
    if($(this).val() === ""){ 
     $("#showlink").hide(); 
     }else{ 
     $("#showlink").show(); 
     } 
    }); 
}); 
<div id="showlink"> 
     <a href="#" id="submitBtnId" onclick="addDuctClickHandler();" data-icon="check" data-role="button" data-inline="true" data-theme="b">Submit Final Test</a> 
</div> 

Я что-то пропустил?

Answer 1

Это должно сделать трюк:

// check for the change of any input in the form 
$('#form_id :input').change(function(e) { 

    // if any of the values are blank hide the link 
    if ($('#form_id :input').map(function(idx, elem) { 
      if ($(elem).val() === "") return $(elem); 
     }).size() > 0) 
     $("#showlink").hide(); 
    else 
     $("#showlink").show(); 
}); 

Проблема с кодом является то, что он прикрепляет обработчик изменения в целом виде, а не из входов; Я даже не уверен, что повлияло на это. Также вы используете функцию each для итерации по всем входам всего документа, а не только по форме, и ссылка будет отображаться и скрываться для каждого из них в зависимости от их значения, поэтому в конечном счете ссылка будет видимой или скрытой на основе только на последнем значении, проверенном на итерации.

Answer 2

if($(this).val().indexOf("")) 

или

if($(this).val.indexOf("")) 

Попробуйте использовать indexOf, чтобы увидеть, если пользователь ввел что-то

Answer 3

Вы собираетесь через каждое поле (с функцией each). Когда значение пустое, вы скрываете ссылку, но затем продолжаете работать над другими полями. Вы должны поместить инструкцию «break», когда значение пустое, чтобы прекратить дальнейшую обработку. Было бы даже лучше просто пройти все поля и поддерживать логический параметр. После цикла вы скрываете или показываете ссылку в зависимости от логического параметра.

Как это:

$('#showlink').hide(); // Assume form is incomplete 

$('form#form_id').change(function(e) { 
var complete = true; // Set start of boolean expression 

$(":input").each(function() { 
    complete = complete && $(this).val() !== ""; //If val is empty, the whole expression after the iteration will evaluate to false 
}); 

if(complete) { 
    $("#showlink").show(); 
} 
}); 

Answer 4

Другой вариант в дополнение к @ asymptoticFault Ответим - использовать переменную для сохранения, если ссылка должна быть скрыта или нет:

$('form#form_id').change(function(e) { 
    var should_hide = false; 
    $(":input").each(function() { 
    if($(this).val() === ""){ 
     should_hide = true; 
     return false; // do not process each any more 
    } 
    }); 
    if (should_hide) { 
    $("#showlink").hide(); 
    } else { 
    $("#showlink").show(); 
    } 
}); 

Answer 5

хорошо вы можете сделать это:

var $allInputs = $("input:text"), 
    $button = $("#btnSubmit").hide(); 

$allInputs.change(function(){ 
    var isEmpty = $allInputs.filter(function(){ 
        return ($(this).val()==""); 
       }); 
    $button.hide(); 
    if(isEmpty.length == 0){ 
     $button.show(); 
    } 
}); 

рабочую скрипку здесь : http://jsfiddle.net/QwvtL/4/