javascript - 表单提交刷新页面，不提交

Question

我在提交此表单时遇到问题。我在我网站的其他地方使用相同的表单布局。所以我知道这不是布局问题。每次我单击登录 按钮时，它都会刷新页面而不提交任何内容。如果字段为空，它们应该会在下方显示一条消息，说明您需要输入内容。但是，当我单击字段中没有任何内容的登录按钮时，它仍会刷新页面并且不执行任何其他操作。

客户端:

.container
    .row
      .col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1
        form#loginForm(name='login', novalidate='')
          .row
            .col-md-6
              .form-group
                input#username.form-control(type='username', placeholder='Your Username *', required='', data-validation-required-message='Please enter your username')
                p.help-block.text-danger
              .form-group
                input#password.form-control(type='password', placeholder='Your Password *', required='', data-validation-required-message='Please enter your password')
                p.help-block.text-danger
            .clearfix
            .col-lg-12.text-center
              #success
              button.btn.btn-xl(id='loginBtn', type='submit') Login
              br
              br
              a(href='/blog/register') Register!

javascript 处理程序:

$(function(){
  $("#loginForm input").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var username = $("input#username").val();
        var password = $("input#password").val();
        $.ajax({
            url: "/api/login",
            type: "POST",
            data: {
                user: username,
                pass: SHA256(password)
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Rerouting you to home page... </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append($("<strong>").text("Sorry, we dont have these matching credentials in our database"));
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        });
    },
    filter: function() {
        return $(this).is(":visible");
    },
  });

  $("a[data-toggle=\"tab\"]").click(function(e) {
      e.preventDefault();
      $(this).tab("show");
  });
});

我什至没有得到任何服务器端的东西，因为没有提交。我在函数中尝试了 console.log()，但我什至没有得到它。它甚至没有达到功能。

Answer 1

原来这个jQuery脚本所在的外部.js文件...
未在 your page 中加载.

我想这都是因为一些Pug head 中某处的语法问题.

我不得不提到生成的 HTML 中那些与 Pug 相关的错误:

<!--if lt IE 9-->应该是 <!--[if lt IE 9]-->并且没有 <![endif]-->

下面，由于括号和逗号，HTML 语法无效...
看起来 Pug 还没有编译那部分。

<!--script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', integrity='sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY', crossorigin='anonymous')-->

<!--script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', integrity='sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo', crossorigin='anonymous')-->

问题可能与Pug comment syntax有关.