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;
}