使用 verify.JS 更改错误消息的位置答案

【问题标题】：Change location of error message using verify.JS使用 verify.JS 更改错误消息的位置
【发布时间】：2015-12-11 06:26:05
【问题描述】：

我有一个带有 JS 验证 (verify.js) 的表单，其中需要电话或电子邮件。一切正常，我唯一的问题是尝试更改出现验证错误消息的位置。

Here's a JSFiddle

data-validate 属性触发 verify.js 规则。我写了一条规则phoneOrEmail，当点击提交按钮时触发。这会导致验证消息“附加”到提交按钮。我希望验证消息出现在电话或电子邮件字段附近。

我的 JS 不是很强大，所以我希望这很简单。 If it helps, here's the documentation for verify.js.

如果您不想点击进入 JSFiddle，这是我的 HTML：

<form action="#" method="post" name="landing_form" id="landing_form">
    <label for="phone">Phone Number</label>
    <input type="text" class="form-control" name="phone" id="phone" data-validate="min(10)">
    <label for="email">Email</label>
    <input type="text" class="form-control" name="email" id="email" data-validate="email">
    <input type="submit" value="Send Message" data-validate="phoneOrEmail">
</form>

还有我的 JS：

$(document).ready(function() {
    $.verify.addRules({
        phoneOrEmail: function(r) {
            var phone = $('#phone').val();
            var email = $('#email').val();
            if (phone == '' && email == '') {
                return "Please supply phone OR email";
            } else {
                return true;
            }
        },
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我已经在你的 HTML 中添加了一个 span 标签，你可以这样来做：

$(document).ready(function() {
            $.verify.addRules({
                phoneOrEmail: function(r) {
                    var phone = $('#phone').val();
                    var email = $('#email').val();
                    if (phone == '' && email == '') {
                        $('.errMsg').html("Please supply phone OR email";)

                    } else {
                        return true;
                    }
                },
            });
        });

您也可以对每个“电子邮件和电话”执行相同操作。

【讨论】：