表格未在Chrome或Edge中提交,IE即可

时间:2018-03-21 23:19:47

标签: javascript jquery html asp.net-mvc form-submit

我有一个登录表单' loginFormYb'我做了一些更改,现在它不能在Chrome或Edge中提交。 IE运行正常!我尝试清除浏览器缓存并重置VS,但仍然无法提交。

仅供参考 - 按钮" loginFormBtnYb'点击事件触发器不是JS中的表单提交事件,控制器没有被点击。

这就是我正在做的事情



'use strict';

if (typeof yb === 'undefined')
  var yb = {};

$(function() {
  yb.loginPage.initializePage();
});

yb.loginPage = new function() {
  var scope = this;
  scope.laddaInstance;

  scope.initializePage = function() {
    scope.initializeLogin();
  };

  scope.initializeLogin = function() {

    $("#RememberMe").prettyCheckable();

    // this is being triggered
    $("#loginFormBtnYb").off('click').on('click', function() {
      var ladda = Ladda.create(this);
      ladda.start();
      scope.laddaInstance = ladda;
    });
 
    // this isn't being triggered in Edge or Chrome
    $("#loginFormYb").off('submit').on('submit', function() {
      var form = $("#loginFormYb");
      form.validate();

      if (!form.valid()) {
        scope.laddaInstance.stop();
      }
    });


  };
};

<div class="col-sm-8">
  <section id="loginForm">
    <form action="/Account/Login" class="form-horizontal" id="loginFormYb" method="post" role="form" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="aD5jjGXurAKYdugXa8lAj6hWVvRtOmunO9HlFTlu8Gvo5qQNHLBg4X0pVYF1x8WMT7CIA8pPwu42LDHvkql089BvMvDlTwoqa7j1NwtZKtU1">
      <h4>Use a local account to log in.</h4>
      <hr>
      <div class="row">
        <div class="col-sm-8">
          <div class="form-group">
            <div class="input-group">
              <input value="charles.pareto@outlook.com" class="form-control input-lg" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email address"
                type="text">
              <div class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
            </div>
            <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
          </div>

          <div class="form-group">
            <div class="input-group">
              <input class="form-control input-lg" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" placeholder="Password" type="password" value="Stanky6!">
              <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
            </div>
            <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
          </div>
        </div>
      </div>
      <div class="form-group has-pretty-child">
        <div class="clearfix prettycheckbox labelright  blue"><input data-label="Remember Me" data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" style="display: none;">
          <a href="#" class=" "></a>
          <label for="RememberMe">Remember Me</label></div><input name="RememberMe" type="hidden" value="false">
      </div>
      <div class="form-group">
        <div class="row">
          <dic class="col-sm-8">
            <button id="loginFormBtnYb" type="submit" class="btn btn-yb btn-lg btn-block ladda-button" data-style="zoom-in" disabled="" data-loading=""><span class="ladda-label">Log in</span><span class="ladda-spinner"><div class="" role="progressbar" style="position: absolute; width: 0px; z-index: auto; left: auto; top: auto;"><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-0-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(0deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-1-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(30deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-2-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(60deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-3-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(90deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-4-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(120deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-5-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(150deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-6-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(180deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-7-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(210deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-8-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(240deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-9-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(270deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-10-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(300deg) translate(7.36px, 0px); border-radius: 1px;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; animation: opacity-100-25-11-12 1s linear infinite;"><div style="position: absolute; width: 7.416px; height: 3px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; transform-origin: left center 0px; transform: rotate(330deg) translate(7.36px, 0px); border-radius: 1px;"></div></div></div></span><div class="ladda-progress" style="width: 0px;"></div></button>
          </dic>
        </div>
      </div>
      <div class="form-group">
        <p>
          <a class="input-lg" href="/Account/Register?Length=0" style="padding-left: 0px; color: #484848">Register as a new user</a>
        </p>

        <p>
          <a class="input-lg" href="/Account/ForgotPassword?Length=0" style="padding-left: 0px; color: #484848">Forgot your password?</a>
        </p>
      </div>
    </form>
  </section>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我认为是按钮点击触发了Ladda。如果我删除它,一切都很好。

  // removed this code block
  var ladda = Ladda.create(this);
  ladda.start();
  scope.laddaInstance = ladda;