使用表单验证更改 DIV 边框颜色答案

【问题标题】：Change DIV border color with form validation使用表单验证更改 DIV 边框颜色
【发布时间】：2016-02-18 21:18:27
【问题描述】：

我正在使用 DIV“find_frame”来包装输入字段。

如果验证停止提交，我需要更改 DIV "find_frame 边框颜色。

我该怎么做？

<form>
    <div class="find_frame">
        <input type="text" id="find" name="find" placeholder="Enter Number">
    </div>
    <input id="findbutton" type="button" value="FIND ME">
</form>

谢谢。

【问题讨论】：

标签： javascript jquery forms validation input

【解决方案1】：

试试这样的模式：

var $ff = $('.find_frame');
var $input = $('#find');
var $button = $('#findbutton');

function PUTVALIDATIONHERE(value) {
    return false;
}

$button.click(function() {
    var value = $input.val();
    if (!PUTVALIDATIONHERE(value)) {
        $ff.css("borderColor", "red");

        // or use a css class
        $ff.addClass('validationError');
    }
});

如果您需要的验证是检查输入是否为数字，请将 PUTVALIDATIONHERE 函数替换为：

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

【讨论】：

添加一个类几乎总是比使用 .css() 更好，但我不会为此而投反对票。这个想法是正确的
@mhodges 好点。我添加了一个添加css类的例子
@Erik 将我上面的代码放在script 标签中。确保你实现了PUTVALIDATIONHERE 函数（我留下了一个占位符）
谢谢，我需要了解有关验证的更多信息。不确定要在 PUTIVALDATION 中放什么。我还是谢谢你
@Erik，我用一个验证输入是否为数字的函数更新了我的答案