Javascript / jQuery提交表單驗證

Question

我是Web開發的新手，我正在嘗試使用javascript / jquery創建簡單的表單驗證。

我起草了一個非常類似於我的簡單表格，如下所示：

<form>
    <input class="price" type="text" />
    <br />
    <input class="price" type="text" />
    <br />
    <input class="price" type="text" />
    <br />
    <input class="price" type="text" />
    <br />
    <button type="submit" onclick='return validateSubmit();'>Save</button>
</form>

我想發生的是，當用戶單擊“提交”按鈕時，它將在允許提交之前檢查每個輸入框是否包含有效數字（價格），如果一個或多個輸入框無效，則將其突出顯示並顯示警告錯誤“突出顯示的文本框上的輸入無效”或類似的內容。 經過幾次搜索后，這就是我的腳本中的內容：

var validateSubmit = function () {
    var inputs = $('.price');
    var errors = 'False';
    for (var i = 0; i < inputs.length; i++) {
        if (isNaN(inputs[i].value)) {
            $('.price')[i].focus();
        }
        errors = 'True';
    }
    if (errors == 'True') {
        alert('Errors are highlighted!');
        return false;
    }
    return true;
};

我了解我所做的事情有什么問題，但我不知道如何解決。
我知道我們一次只能聚焦（）1個元素，但我想產生一些效果，使它用無效字符突出顯示輸入框。
請告訴我該怎么做，或者如果有更好的方法，可以向我展示一些示例。 我看到引導程序對此焦點有一些CSS效果，但是我不知道如何實現它。 謝謝！

Answer 1

您可以將具有錯誤值的類添加到輸入中。 例如，該類可以添加邊框。

 var validateSubmit = function () { var inputs = $('.price'); var errors = 'False'; for (var i = 0; i < inputs.length; i++) { if (isNaN(inputs[i].value)) { $(inputs[i]).addClass('error'); errors = 'True'; } else { $(inputs[i]).removeClass('error'); } } if (errors == 'True') { alert('Errors are highlighted!'); return false; } return true; }; 

 .error { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input class="price" type="text" /> <br /> <input class="price" type="text" /> <br /> <input class="price" type="text" /> <br /> <input class="price" type="text" /> <br /> <button type="submit" onclick='return validateSubmit();'>Save</button> </form> 

Answer 2

首先，我認為您應該清理HTML。 例如，將id屬性賦予form標簽以引用它們總是一個好主意。 另外，如果我錯了，可以有人糾正我，如果不為輸入字段提供name屬性，您將不會提交任何值。

<form id="price-form" action="" method="get">
     <input name="price[]" type="text" value="" class="price" />
     <br />
     <input name="price[]" type="text" value="" class="price" />
     <br />
     <input name="price[]" type="text" value="" class="price" />
     <br />
     <input name="price[]" type="text" value="" class="price" />
     <br />
     <button type="submit">Save</button>
</form>

現在，由於您使用的是jQuery，為什么不利用其on（）和.each（）之類的方法呢？

$(function() {

    $('#price-form').on('submit', function(e) {
        // this variable acts as a boolean, so might as well treat it as a boolean
        var errors = false;
        // remove previous errors 
        $('.price').removeClass('error');
        // check each input for errors
        $('.price').each(function() {
            if (isNaN(this.value)) {
                $(this).addClass('error');
                errors = true;
            }
        });
        // alert if there are any errors
        if (errors) {
           alert('Errors are highlighted!');
           e.preventDefault(); // stop submission
        }
   });
});

在您的CSS中，您可以

.error {
     border: 2px solid #a00;
}