Question

我有一张表格：

 <form id="sForm">
   <input type=text id="msg">
   <input type="button" id="cli">
 </form>

在脚本文件中，我写了一些东西：

 $("#sForm").validate(
      rules:{msg:{required:true}},
      message:{msg:{required:"please input msg"}}
      errorPlacement: function(error, element) {
               error.insertAfter(element)
      }
 );

当我使用提交时 $("#sForm").submit() 表单上显示的错误消息，但仍然提交。当我用户点击功能时： $("#cli").click() 它成功了！发生了什么事？

Answer 1

你有几个问题，其中任何一个都会破坏jQuery Validate插件......

1）您需要在选项周围添加一组大括号{ }：

$("#sForm").validate({
    // your options
});

2）您的messages选项拼写错误为message。

3）您在messages选项后缺少逗号。

4）您的输入元素必须包含唯一的name属性：

<input type="text" name="msg" id="msg">

5）如果您将输入type="button"更改为type="submit"，则无需担心使用click或submit处理函数。该插件将自动捕获submit事件。

<input type="submit" id="cli">

工作代码：

$(document).ready(function () {  // <- ensure the DOM is ready

    $("#sForm").validate({  // <- the braces were missing
        rules: {
            msg: {  // <-  "msg" is supposed to be the name attribute
                required: true
            }
        },
        messages: { // <- this was misspelled as "message"
            msg: {
                required: "please input msg"
            }
        },  // <-  this comma was missing
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });

});

HTML标记：

<form id="sForm">
    <input type="text" name="msg" id="msg" />
    <input type="submit" id="cli" />
</form>

工作演示：http://jsfiddle.net/kPKqQ/

Answer 2

这是你的问题。您无法在validate方法中使用 id 。 因此，请更改HTML以使用名称属性

<form id="sForm">
   <input type=text name="msg">
   <input type="submit" name="cli">  <!--since form submission, change it-->
 </form>

JS：

$("#sForm").validate({
      rules:{'msg':{required:true}},  //REPRESENT NAME ATTRIBUTE NOT ID
      messages:{'msg':{required:"please input msg"}},
      errorPlacement: function(error, element) {
               error.insertAfter(element)
      }
 });

选中此JSFiddle

jQuery Validation插件，$（“form”）。submit不要验证表单

2 个答案: