0

我有一个表格：

 <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() 它成功了！发生了什么？

4

2 回答 2

3

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

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

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

2) 您的messages选项拼写错误为message.

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

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

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

5）如果您将输入更改type="button"为 a type="submit"，您将不必担心使用 aclick或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/

于 2013-09-17T04:07:00.383 回答
1

这是你的问题。您不能id在验证方法中使用。 因此，将您的 HTML 更改为使用name属性

<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

于 2013-09-17T03:54:31.193 回答