Question

我有联系表格。它询问您的姓名，然后询问您是否希望通过电话或电子邮件与您联系。除非用户选择电话或电子邮件的单选按钮，否则电话和电子邮件字段将被隐藏。点击电话或电子邮件后，我会验证他们是否输入了正确的电话或电子邮件地址。

我的问题是如何检查JQuery Validation并在用户没有点击任何单选按钮时打印出错误消息？

Answer 1

您是否只是询问如何验证一组单选按钮？由于您没有显示任何代码，我只能向您展示如何使用该插件验证一组radio input。

然后，您将使用built-in rules method从相应的输入中动态添加/删除规则。同样，在定制解决方案之前，我需要查看您的代码。

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            radiotest: {
                required: true
            }
        },
        messages: {
            radiotest: {
                required: "please select at least one option"
            }
        }
    });

});

<强> HTML ：

<input type="radio" name="radiotest" value="0" />
<input type="radio" name="radiotest" value="1" />

文档：http://docs.jquery.com/Plugins/Validation

Answer 2

更新（2012-01-20 19:38）：我想我理解你在寻找什么，并注意到你想使用jQuery的Validation插件。

这是JSFiddle 上的working Demo（注意：我从Sparky的小提琴中分叉）

默认情况下，仅设置有关单选按钮的规则。所有消息都预先设置，并隐藏表单的特定字段。现在，无论何时单击单选按钮，我都会隐藏无用字段，删除相应的规则。我还会显示正确的字段并添加相应的规则。

您要查找的特定代码必须是：

    /* Toggle fields */
    $('#mailfields').hide();
    $('#phonefields').show();

    /* Remove email rule */
    $('input:text[name=emailadress]').rules('remove');

    /* Add a requirement rule for phone */
    $('input:text[name=phonenumber]').rules('add', { required: true });

第一个回答：您说当用户选择两个无线电（电子邮件或电话）中的一个时，您会显示一个或另一个对应的字段。因此，我假设您已经有一些jQuery代码，每次用户单击一个单选按钮时都会运行。

这段代码可以添加一个类或一个隐藏的字段或者你喜欢的任何东西（或者对于这种情况最好的常见做法，我很遗憾没有足够的经验知道......）让你知道后来的用户确实选择了一个选项。

如果您可以显示更多代码（例如jsFiddle），我可以给您一个更具体的答案。不过，这就是我要做的事情：

将表单的所有字段都包含在HTML文档中
使用jQuery和CSS隐藏/显示字段

测试总是一样的：

(phoneRadio.selected && phoneField.filled)
|| (mailRadio.selected && mailField.filled)

让我知道这有多大帮助。

Answer 3

如果你有很多表单并且使用ASP.NET MVC等，你可以使用jquery unobtrusive。或者你可以这样做：

Demo

$('#form').click(function (e) { // or $form.submit handler
    if ($('#email').val() == "") // or you can use an regex validation
    {
       e.preventDefault();
        // set message here
        $('#message').css('color', 'red').append('email invalid !');
    }
});

$('form').submit(function (e) {
    alert('submited :' + $('#email').val());
});

如何在填写两个必填字段中的一个时验证表单

3 个答案: