javascript - 使用 verify.JS 更改错误消息的位置

Question

我有一个带有 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;
            }
        },
    });
});

Answer 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;
                    }
                },
            });
        });

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