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。

我认为这完全归因于head中的某些Pug语法问题。

我必须在制作的HTML上提及那些与Pug相关的错误：

应为且没有<![endif]-->

下面，由于括号和coma，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。

有关

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指出的那样。这是一个哈巴狗错误，由我引起。

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

2 个答案: