在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驗證進行表單驗證

回答

相關問題