Javascript/jQuery 提交表单验证

Question

我是网络开发新手，我正在尝试使用 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;
};

我明白我所做的事情出了什么问题，但我不知道如何解决。
我知道我们一次只能 focus() 1 个元素，但我想要产生一些效果，它突出显示包含无效字符的输入框。
请告诉我该怎么做，或者如果有更好的方法，你能给我看一些例子吗？我看到 bootstrap 对于这个焦点有一些 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>