1

我正在尝试设置一些基本的 jQuery 验证，但似乎没有任何效果。当我运行页面并点击提交时，第一个文本框会突出显示，但第二个文本框的消息会显示在摘要中。如果单击进出第二个文本框，两个框都会突出显示，但会显示第二个框的消息两次。随后单击提交按钮会导致在按下按钮时显示第二条消息，但在释放按钮时会隐藏。

很明显，我错误地设置了一些关键的东西，但我一辈子都看不到是什么。

形式：

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" />
    Some Input2 <input type="text" id="someInput2" />

    <input id="btnSubmit" type="submit" />    
</form>

代码（在 document.ready 处理程序中运行）：

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElement");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElement");
    },
    errorClass: "errorMsg",
    errorContainer: '#errorSummary',
    errorLabelContainer: '#errorsList',
    wrapper: 'li',
    onkeyup: false,
    focusCleanup: false
});

$("#someInput1").rules("add", {
    required: true,
    messages: {
        required: "Some input 1 is required"
    }
});

$("#someInput2").rules("add", {
    required: true,
    messages: {
        required: "Some input 2 is required"
    }
});
4

2 回答 2

2

上面代码的问题是 jQuery 验证插件要求所有输入都有名称。

添加

name="X" 
name="Y"

到两个文本框固定事项。

Some Input  <input type="text" name="X" class="someInput1" />
Some Input2 <input type="text" name="Y" class="someInput2" />
于 2012-04-19T18:30:54.010 回答
1

不确定您是否正在编写所有代码，因为您最终希望对其进行更多自定义，但如果您希望您的示例以最基本的形式工作，您所需要的就是：

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" class="required" />
    Some Input2 <input type="text" id="someInput2" class="required" />
    <input id="btnSubmit" type="submit" />    
</form>

$('#formInput').validate();

至少，您可以从它开始，一次添加一个自定义选项，这样您就可以看到正在发生的事情。

编辑：对于自定义消息（注意我通过删除内联规则class）：

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" name="someinput1" />
    Some Input2 <input type="text" id="someInput2" name="someinput2" />
    <input id="btnSubmit" type="submit" />    
</form>

$("#someInput1").rules("add", {
   required: true,
   messages: { required: "This input is required - learn2forminputn00b!!" }
});

替代方法（来自文档）：

name使用此方法通过构造函数中的表单字段为这些规则指定规则和消息。

$(".selector").validate({
   rules: {
     name: {
       required: true,
       minlength: 2
     }
   },
   messages: {
     name: {
       required: "We need your email address to contact you",
       minlength: jQuery.format("At least {0} characters required!")
     }
   }
})
于 2012-04-19T17:58:28.187 回答