Question

我正在尝试设置一些基本的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"
    }
});

Answer 1

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

添加

name="X" 
name="Y"

到两个文本框固定的事项。

Some Input  <input type="text" name="X" class="someInput1" />
Some Input2 <input type="text" name="Y" class="someInput2" />

Answer 2

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

<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!!" }
});

替代方法（来自docs）：

使用此方法通过构造函数中的表单字段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!")
     }
   }
})

jQuery-validate每个元素验证不起作用

2 个答案: