Javascript/jQuery 提交表单验证答案

【问题标题】：Javascript/jQuery Submit Form ValidationJavascript/jQuery 提交表单验证
【发布时间】：2015-07-26 19:59:40
【问题描述】：

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

我知道我所做的有什么问题，但我不知道如何解决它。
我知道我们一次只能 focus() 1 个元素，但我想产生一些效果，它会突出显示带有无效字符的输入框。
请告诉我该怎么做，或者如果有更好的方法，你能给我一些例子。我看到 bootstrap 有一些针对这个焦点的 css 效果，但我不知道如何实现它。谢谢！

【问题讨论】：

也许你应该尝试一些简单的 JavaScript 表单验证库，例如 validate.js 或类似的东西。

标签： javascript jquery forms validation

【解决方案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>

【讨论】：

嗨，谢谢，突出显示部分正在工作，但您能否查看脚本，了解为什么即使在更正突出显示的文本框后，在第二次提交点击后仍然返回错误
使用.removeClass()函数api将条件放在for循环内的else语句中，以删除初始条件不匹配的类。
更新了代码。 True 总是被设置并在提交时在良好的输入上添加一个 removeClass。
@tellez 是的，谢谢你，它终于完美地工作了。最后一件事，如果我想让它成为一个实时验证，我的意思是当我输入它时检查我输入的内容是否有效，它是否与这段代码有很大不同，或者我必须使用一些外部 js 库才能能够要做到这一点？无论如何，非常感谢您的回答，非常有帮助！
@tellez 你能不能也看看为什么我不能让它在 js fiddle 中工作jsfiddle.net/supermaynard05/oL09t762

【解决方案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;
}

【讨论】：