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

时间:2014-03-31 19:09:04

标签: jquery forms jquery-validate pug

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

我在我的玉文件中有这个:

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>

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

1 个答案:

答案 0 :(得分:0)

     $('#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();
        }
    });