在Jade模板中使用jQuery验证进行表单验证

我使用nodejs和Jade作为其模板。我需要进行表单验证。在Jade模板中使用jQuery验证进行表单验证

我有这个在我玉文件：

form(action='/course/create', method='post', id='createForm') 
    table#profile 
     tr 
      td.left 
       label(for='courseNum') Course Number * 
      td.right 
       input#courseNum.inputBox2(type='text', name='courseNum') 
     tr 
      td.left 
       label(for='courseName') Course Name * 
      td.right 
       input#courseName.inputBox2(type='text', name='courseName') 
     tr 
      td.left 
      td.right 
       button#btnSubmit(type='submit') SUBMIT 

script(src='/javascript/jquery-1.9.1.js'). 
script(src='/javascript/jquery.validate.js'). 
script. 
    $(document).ready(function(){ 
     $('#createForm').validate({ 
      rules: { 
       courseNum : "required", 
       courseName : "required" 
      }, 
      messages : { 
       courseNum : "Required!", 
       courseName : "Required!" 
      } 
     }); 
    });

但我不知道为什么有显示出来没有错误。是的，表单在无效时不会提交，但不会显示错误。并且该表单在有效时也不会提交。但是，当我删除验证，它确实提交。所以问题在于验证。

我缺少什么？

下面是来自浏览器的渲染代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="/stylesheets/style.css"> 
     <link rel="stylesheet" href="/stylesheets/reset.css"> 
     <link rel="stylesheet" href="/stylesheets/typography.css"> 
     <script src="/javascript/jquery-1.9.1.js"></script> 
     <script src="/javascript/jquery.validate.js"></script> 
    </head> 

<body> 
    <form id="createForm" action="/course/create" method="post"> 
     <table class="profile"> 
      <tr> 
       <td class="left"> 
         <label for="courseNum">Course Number *</label> 
       </td> 
       <td class="right"> 
         <input id="courseNum" type="text" name="courseNum" class="inputBox2"> 
       </td> 
      </tr> 
      <tr> 
       <td class="left"> 
         <label for="courseName">Course Name *</label> 
       </td> 
       <td class="right"> 
         <input id="courseName" type="text" name="courseName" class="inputBox2"> 
       </td> 
      </tr> 
      <tr> 
        <td class="left"> 
        </td> 
        <td class="right"> 
         <button id="btnSubmit" type="submit">SUBMIT</button> 
        </td> 
      </tr> 
     </table> 
    </form> 
     <script> 
     $(document).ready(function(){ 
      $('#createForm').validate({ 
       rules: { 
        courseNum : "required", 
        courseName : "required" 
       }, 
       messages : { 
        courseNum : "Required!", 
        courseName : "Required!" 
       } 
      }); 
     }); 
     </script> 
    </body> 
</html>

希望我们能找到我丢失。请帮助。当我删除验证时，它会提交表单。但是，当验证，即使它是有效的，它不提交，并没有错误。

来源

2014-03-31 krisbie

是否浏览器显示在控制台中的任何JavaScript错误？ – DDDD

请这是客户端问题，所以只显示客户端代码。换句话说，显示由浏览器**看到的JavaScript和HTML **。 – Sparky

@Sparky我刚刚用浏览器的“查看页面源代码”编辑了这个问题。先谢谢您的帮助。 – krisbie

 $('#createForm').validate({ 
     rules: { 
      courseNum : "required", 
      courseName : "required" 
     }, 
     messages : { 
      courseNum : "Required!", 
      courseName : "Required!" 
     }, 
     submitHandler: function(form){ 
     form.submit(); 
     } 
    });

或更好

 $('#createForm').validate({ 
     rules: { 
      courseNum : { required:true }, 
      courseName : { required:true } 
     }, 
     messages : { 
      courseNum : "Required!", 
      courseName : "Required!" 
     }, 
     submitHandler: function(form){ 
     form.submit(); 
     } 
    });

来源

2014-03-31 19:28:53 reiniergs

其中一个不比另一个“更好”，并且'submitHandler'回调不是强制性的。 OP的代码应该像他发布的那样工作，尽管他需要向我们展示在浏览器中呈现的代码。 – Sparky

在Jade模板中使用jQuery验证进行表单验证

回答

相关问题