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

【问题标题】：Form Validation using jQuery Validation in Jade template在 Jade 模板中使用 jQuery Validation 进行表单验证
【发布时间】：2014-05-11 07:04:47
【问题描述】：

我正在使用 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>

希望我们能找到我失踪了。请帮忙。当我删除验证时，它会提交表单。但是有validation的时候，不管是valid还是valid，都不提交，也不会报错。

【问题讨论】：

浏览器是否在控制台中显示任何 javascript 错误？
拜托，这是一个客户端问题，所以只显示客户端代码。换句话说，显示 JavaScript 和 HTML 浏览器所看到的。
@Sparky 我现在刚刚使用浏览器中的“查看页面源代码”编辑了问题。提前感谢您的帮助。
我不知道如何帮助你。您发布的代码已经完美运行：jsfiddle.net/Zg7zA
是的，同意，我用nodejs和jade 1.3.0试了一下，效果也很好。顺便说一句：在包含 jquery 后删除点并使用脚本标签进行验证，如果您编写纯 html/css/javascript，则只需要点。

标签： jquery forms jquery-validate pug

【解决方案1】：

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

【讨论】：

一个并不比另一个“更好”，submitHandler 回调不是强制性的。 OP 的代码应该可以正常工作，尽管他需要向我们展示在浏览器中呈现的代码才能确定。