如何正确validation模态表单

我似乎无法通过我的bootstrap模式进行validation，我一直在努力处理我遇到的几个例子。

validation引导模式的正确方法是什么？

我的HTML：

 
 
 
 × 
Add Stuff
 
 
 
 
 A p Name: 
  
 
 
 Action: 
  
 
 
 
 
 Save Close 
 
 
  

我的Javascript：

 $(function () { $("#newModalForm").validate({ rules: { pName: { required: true, minlength: 8 }, action: "required" }, messages: { pName: { required: "Please enter some data", minlength: "Your data must be at least 8 characters" }, action: "Please provide some data" } }); }); 

基于我的代码，当我单击模态上的保存按钮时似乎没有任何事情发生。 我正在使用jquery.validate.js脚本。

有人能指出我正确的方向吗？

Answer 1

你有两个问题：

1. 您需要将按钮设置为type="submit"而不是type="button"

2. 您的提交按钮应位于form标签内。

请参阅工作示例代码段。

 $(function() { $("#newModalForm").validate({ rules: { pName: { required: true, minlength: 8 }, action: "required" }, messages: { pName: { required: "Please enter some data", minlength: "Your data must be at least 8 characters" }, action: "Please provide some data" } }); }); 

     Open Modal 
 
 
 
 × 
Add Stuff
 
 
 
 
 A p Name: 
  
 
 
 Action: 
  
 
 
 Save Close 
 
 
 
 
  

Answer 2

如果需要通过AJAX从bootstrap模式发送数据，请使用以下代码：

 $("#addMyModal form").validate({ rules: { Name: { required: true, minlength: 2 }, Email: { required: true, minlength: 5 }, Phone: { required: true, minlength: 12 } }, messages: { Name: { required: "Обязательное поле", minlength: "Минимальная длинна Имени 2 символа" }, Email: { required: "Обязательное поле", minlength: "Минимальная длинна Email 5 символов", email: "Пожалуйста введите корректный email адрес." }, Phone: { required: "Обязательное поле", minlength: "Минимальная длинна Телефона 11 символов" } }, submitHandler: function(form) { $.ajax({ url: './pay-vip.php', type: 'POST', data: $(form).serialize(), success: function(response) { location.replace(location + "pay-vip.php"); alert("Send mail") } }); } }); 

     Open Modal 
 
 
 
 × 
Add Stuff
 
 
 
 
 A p Name: 
  
 
 
 Action: 
  
 
 
 Save Close 
 
 
 
 
  

Answer 3

我有一些类似的问题。 但事实certificate

 $("#newModalForm").validate({ ... }); 

必须放在外面

 $(function () { }); 

这解决了我的问题

Answer 4

 $(function() { $("#newModalForm").validate({ rules: { pName: { required: true, minlength: 8 }, action: "required" }, messages: { pName: { required: "Please enter some data", minlength: "Your data must be at least 8 characters" }, action: "Please provide some data" } }); }); 

     Open Modal 
 
 
 
 × 
Add Stuff
 
 
 
 
 A p Name: 
  
 
 
 Action: 
  
 
 
 Save Close