Question

我尝试使用此代码验证单选按钮：

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript">
</script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules:{
username:{
required:true,
alphanumeric:true
}
gender:"required",
},
messages:{
username:
{
required:"username cannot be empty",
alphanumeric:"username needs to be alphanumeric"
}
gender:{
required:"specify this field",
}
}
});
});


</script>
<style type="text/css">


label.error
{
color:red;
padding-left:.5em;
}
</style>

</head>
<body>
<form id="myform" action="r.html">
<table>

<tr>
<td><label for="username">Username<em>*</em>:</td></label><td><input type="text"           id="username" name="username"/></td>
</tr>

<tr>
<td><label for="gender" validate="required:true" class="required">Gender<em>*</em>:      </label></td><td><input type="radio" id="gender" name="gender" value="male"/>Male</td>
</tr>
<tr>
<td></td><td><input type="radio" id="gender" name="gender" value="female"/>Female</td>
</tr>

<tr>
<td></td>
<td><input type="submit" value="submit" id="submit"/></td>
</tr>
</table>
</form>
</body>
</html>

当我尝试使用此代码时，性别字段正在验证，但错误消息显示在性别和男性属性之间。但是在男性属性之后必须显示0.5em。

并且字母数字验证根本不起作用。请有人帮助我。提前致谢。

Answer 1

你有很多错误......

就像in your other question一样，这不是规则的典型语法......

gender:"required",

它应该是required: true，而rules: {}就像这样......

rules: {
    username: {
        required: true,
        alphanumeric: true
    },
    gender: {
        required: true
    }
},

在这里的HTML中......

<label for="gender" validate="required:true" class="required">Gender<em>*</em>:</label>

validate="required:true"完全是多余的，应该删除。

它没有意义，因为它是一个完全捏造的attribute。
它已应用于label而不是input。

class="required"不仅是多余的，因为它已应用于label而非input元素，因为您已经在.validate()中指定了规则，所以它完全是多余的选项。

使用jQuery中定义的规则，HTML将只是：

<label for="gender">Gender<em>*</em>:</label>

要使用alphanumeric规则，您还需要包含“其他方法”文件here：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js

或缩小：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js

此处您的HTML无效。请注意</label>如何包裹在</td> ...

之外

<td><label for="username">Username<em>*</em>:</td></label>

应该是：

<td>
    <label for="username">Username<em>*</em>:</label>
</td>

就我们的错误而言，我不会首先使用table来布置表单。尽管如此，您可以使用内置的errorPlacement:方法放置错误消息。 error.insertAfter(element)是默认函数。

使用条件来测试input的类型将允许您更改单选按钮的此功能。您可以调整以下代码，根据需要发送消息。

jQuery .validate()方法：

$("#myform").validate({

    // your rules and options,

    errorPlacement: function (error, element) {
        if (element.is('input[type="text"]')) {
            error.insertAfter(element); // placement of errors on text fields
        } else if (element.is('input[type="radio"]')) {
            element.next('.radio-message').html(error);  // placement of errors on radio buttons
        } else {
            error.insertAfter(element);  // default placement
        }
    }
});

<强> HTML：

<input type="radio" id="gender" name="gender" value="male" />Male <span class="radio-message"></span>

工作演示：

<强> http://jsfiddle.net/kP4Xy/

您还缺少一个逗号（将 中断代码）并且有一些额外的逗号（可能会破坏IE中的代码< / em>的）。

再次， like I stated before，当您按照正确的代码缩进和格式设置时，更容易看到这些错误。 我强烈建议您这次听取我的意见。您将成为更好的程序员，您的代码将更易于阅读，您的HTML将更有效，并且您的JavaScript将更容易进行故障排除。

插件文档：

http://docs.jquery.com/Plugins/Validation

如何验证单选按钮并将字母数字属性添加到文本框？

1 个答案: