檢查所有字段的空值

Question

我想如果所有輸入的值都是url # （ <form action="#".... ）否則就不去了。 但是在這段代碼中它只適用於第一個字段， 我希望它適用於所有字段 。（我不能從ajax call或preventDefault或window.location （因為從字段輸入的是input：file）。如何解決？

觀看演示： http : //jsfiddle.net/jGu4e/

<form action="abc.html" method="POST" class="submit">
    <input type="text" name="name"><br>
    <input type="text" name="name"><br>
    <input type="text" name="name"><br>
    <button id="cli">Submit</button>
</form>



$('.submit').submit(function() {
    var input = $(this).closest('form').find('input[type="text"]');
  if (!$(input).val()){
    var cssObj={'border-radius':'5px',border:"none","box-shadow":"0 0 1px 1px red",outline:"none",background:"#ffc4c4"};
    $('input[type="text"]').css(cssObj);
    return false;
  };
});

Answer 1

您的問題確實是雙重的。 首先，您的選擇器可以/將返回多個字段。 其次，當其中任何一個都不具有值時，您需要從.submit調用返回false。

這個jQuery應該可以解決問題：

$('.submit').submit(function() {
        var input = $(this).closest('form').find('input[type="text"]');
        var result = true;
        input.each(function(){           
            if (!$(this).val()){
              var cssObj={'border-radius':'5px',border:"none","box-shadow":"0 0 1px 1px red",outline:"none",background:"#ffc4c4"};
              $(this).css(cssObj);
              result = false;
            };
        });
        return result;
    });

如您在此處更新的jsfiddle所展示的： http : //jsfiddle.net/T9YBu/1/

編輯：此代碼中仍有缺陷。 例如，如果用戶未輸入值，它將變為紅色。 如果用戶隨后填寫了一個值並單擊“提交”，則該值將保持紅色。 修復起來很容易，但這確實是您應該使用經過預先測試的驗證插件的原因。