Question

您好我在尝试使用jQuery验证插件做一些事情并且似乎卡在一个地方。

以下是一些代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('#myform').validate();
        $('#email').rules('add', {required: true, messages: {required: 'email is required'}} );
        $('#phone').rules('add', {required: true, messages: {required: 'phone is required'}} );
        $('#validate').click(function(){
            $('#result').text($('#myform').validate().form());
            return false;
        });
    });
</script>
<form id="myform">
<div>email:<input type="text" id="email" /></div>
<div>phone:<input type="text" id="phone" /></div>
<div id="result"></div>

<input id="valdate" type="image" src="images/submit.png" />
</form>

结果我不断收到错误的错误消息。如果我点击“提交”按钮，“电话是必需的”会显示在电子邮件输入附近，并且“电子邮件是必需的”根本没有显示。

这段代码有什么问题？

Answer 1

您可能会考虑以下内容。读取和调试更清晰一些。由于您使用的标准规则如“必需”，因此除非您需要不同的内容，否则不必指定消息。规则和消息由输入字段的名称（例如，电子邮件）标识。

errorPlacement选项用于指定邮件的位置。您不必包含此选项;默认设置是将消息附加到输入字段。但是，如果你有布局div或需要特殊的位置，无线电盒上的消息，或者你有什么，这是做的地方。

$(document).ready(function(){ 
    $('#myform').validate({ 
      rules:{
        email: "required", 
        phone: {required:true, minlength:7}
      },
      messages:{ //not required as default message for "required" rule makes same text
        email: "email is required", 
        phone: "phone is required",
      },
      errorPlacement: function(error, element) { //this is where to put positioning rules
        error.appendTo(element.parent()); //just an example
      }
   });
});

Answer 2

好吧好像我发现了问题。

您已无论如何都要为元素添加 NAME 属性。在我的示例中，如果您为输入元素添加适当的名称，它将很好用。

Answer 3

以下方法：

<script type="text/javascript">
    $(function(){
        $('#myform').validate({
            rules: {
                phone: 'required',
                email: 'required'
            },
            messages: {
                phone: 'phone is required',
                email: 'email is required'
            }
        });
    });
</script>

以及为每个输入字段添加name属性，效果非常好。

Answer 4

首先尝试添加规则，然后调用$（'＃myform'）。validate（）

它无效。你必须先调用validate方法。

使用输入名称方法

我知道我可以使用你上面提到的名字来做。但不幸的是，我将不得不使用ID。

内容不会保持不变。它会根据一些规则而有所不同。因此，几乎每次我都会有一个不同的页面。将有许多具有不同ID的控件。许多验证组等。

所以使用“名称方法”并不符合我的要求。

任何想法如何使用$（selector）.rules（'add'）方法??

P.S。我发现了以下示例http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation，它的工作非常好，代码中没有任何特殊内容。

jQuery动态验证

4 个答案: