表單提交刷新頁面，未提交

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文件...
未加載到您的頁面中 。

我認為這都是由於您head某些Pug語法問題所致。

我不得不在生成的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注釋語法有關 。

Answer 2

我已經解決了這個問題。 很抱歉給您帶來麻煩。 那比我們所有人都想的簡單。 在我的blogIndex.jade文件的末尾。

// jQuery
script(src='../vendor/jquery/jquery.min.js')
// Bootstrap Core JavaScript
script(src='../vendor/bootstrap/js/bootstrap.min.js')
// Contact Form JavaScript
script(src='../javascripts/jqBootstrapValidation.js')
script(src='../javascripts/contact_me.js')
// Theme JavaScript
script(src='../javascripts/clean-blog.min.js')

我也有一個

//this will change it was for testing purposes 
-var loggedIn = false
if !loggedIn
    //show login stuff
else
    //show blog posts

該腳本標記只有一個空格縮進else語句中，因此沒有一個被加載。 正如@LouysPatriceBessette指出的那樣。 這是我造成的哈巴狗錯誤。