2012-06-25 136 views
2

我正在尝试使用JQuery验证程序插件来验证rails应用程序,但它既不会抛出任何错误或验证任何内容。我不知道我的代码还有什么问题 - 任何帮助将不胜感激!JQuery验证未验证

$(document).ready(function() { 
$(".theform").validate({ 
    rules: { 
     name: { 
      required:true, 
      minlength:2, 
      maxlength:50 
     }, 
     email: { 
      required: true, 
      email: true, 
      minlength:2, 
      maxlength:50 
     }, 
     phone_number: { 
      required: true, 
      phoneUS: true, 
      minlength:9, 
      maxlength:20 
     } 
    }, 
    messages: { 
     name: { 
      required: "Please provide your name", 
      minlength: "Too few characters!", 
      maxlength: "Too many characters!" 
     }, 
     email: { 
      required: "Please provide your email", 
      email: "Your email address must be in the format of [email protected]", 
      minlength: "Too few characters!", 
      maxlength: "Too many characters!" 
     }, 
     phone_number: { 
      required: "Please provide your phone number", 
      phoneUS: "Please provide a valid US phone number", 
      minlength: "Too few characters!", 
      maxlength: "Too many characters!" 
     } 
    } 
}); 
$("input#ajax").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "/create_user", 
     data: {name: $('#name').val(), email: $('#email').val(), number: $('#phone_number').val(), ajax:"true"}, 
     success: function(msg){ 
      //console.log(msg.name); 
      $("div#n").html(msg.name); 
      $("div#e").html(msg.email); 
      $("div#p").html(msg.phone_number); 
     } 
    }); 
}); 
}); 

编辑:这里是我试图验证表单:

<div id="theform"> 
<form name="form" action="create" method="post"> 

    Name: <input type="text" name="name" id="name"/><br/> 
    Email: <input type="text" name="email" id="email"/><br/> 
    Phone Number: <input type="text" name="phone_number" id="phone_number" /><br/> 
    <input type="submit" value="Normal Submit" id="normal"> 
    <input type="button" value="Ajax Submit" id="ajax"> 

</form> 
</div> 
+1

你能证明你生成的HTML? –

+0

我刚刚做到了!检查上面的编辑:) – tkrishnan

回答

1

你的选择是错误的:

$(".theform").validate({ ... }); 

选择与theform类的所有元素,这不关你的元素有。您需要选择form元素本身:

$("#theform > form").validate({ ... }); 

$("form[name='form']").validate({ ... }); 

例子:http://jsfiddle.net/nQq6t/

+0

谢谢!工作! – tkrishnan