无法在 html 中使用 onClick 调用 jquery 函数

Question

我正在尝试实现登录功能。我在我的 login.html 中使用表单，当用户单击按钮时，它应该检查字段是否不为空，然后使用 php 检查用户是否存在于数据库中。我添加了对 main.js 的引用

我收到以下错误：Uncaught ReferenceError: submitForm is not definedkontroller.php:89 onclick

登录.html

 <div id="loginForm">
            <form id="loginSubmit" action="?mode=validate">

                <h2>LOGIN</h2>

                <h2>Username</h2>

                <div class="loginButton">
                    <input type="text" id="user" name="username" placeholder="username">
                </div>              

                <h2>Password</h2>

                <div class="loginButton">
                   <input type="password" id="pass" name="password" placeholder="password">
                </div>

            </form>


        </div>

        <div>
            <button class="btn btn-info" onclick="submitForm()">login</button>
        </div> 

main.js

$( document ).ready(function() {

 ...

function submitForm(){

    console.log("in submitForm");
    console.log($("#user").val());

  if ($("#user").val() == ""){
     $("#user").addClass("red");
  }

  $("#user").blur(function() {
      $(this).removeClass("red");             
  });                           

  if($("#pass").val() == ""){
     $("#pass").addClass("red");
  }

  $("#pass").blur(function() {
      $(this).removeClass("red");    
  });

  if( $("#pass").val() != ""  && $("user").val() != "" ){
        console.log("values are not empty");
       $("#loginSubmit").submit();
  }
  return false;
}


}); 

Answer 1

将 submitForm() 函数排除在外

$( document ).ready(function() { });

把函数放在它下面

Answer 2

或者您可以在移除 html 元素上的 onclick 事件的同时为按钮创建 id：

<button class="btn btn-info" id="submit">login</button>

然后，就可以使用jquery来处理点击事件了：

 $('#submit').click(function () {
 //working codes
 });

就是这样！

Answer 3

这会起作用的......

http://jsfiddle.net/incept0/tvrm4c0o/2/

您的这一行没有用户 ID 的井号。所以修复它。

if( $("#pass").val() != "" && $("user").val() != ""){

HTML

 <button class="btn btn-info" onclick="$(this).submitForm();">login</button>

JQUERY

   (function($){

      $(function(){  
        //document ready

      });

      $.fn.submitForm = function() {

          console.log("in submitForm");
          console.log($("#user").val());

          if ($("#user").val() == ""){
              $("#user").addClass("red");
          }

          $("#user").blur(function() {
              $(this).removeClass("red");             
          });                           

          if($("#pass").val() == ""){
              $("#pass").addClass("red");
          }

          $("#pass").blur(function() {
              $(this).removeClass("red");    
          });

          if( $("#pass").val() != ""  && $("#user").val() != "" ){
             console.log("values are not empty");
             $("#loginSubmit").submit();
          }

          return false;
      };

   })(jQuery); 

但老实说，我看到您正在尝试验证此处的输入。一旦触发 onclick，您将遇到更多问题，所以让我为您省去麻烦，并向您展示我一直这样做的方式。我觉得这是最好的方法。但我对任何可以向我展示更好方法的人都持开放态度。

将模糊事件从函数中移除。

• 将代码移至文档就绪部分

• 使用 $("input").is(':visible').on('blur', function() {

• 检查每个模糊的值和类

• 根据值和现有类添加或删除红色类

现在，当他们模糊输入时，它将检查值并在适当时变为红色。你也可以使用.on('change', function() {，所以如果他们不改变值，它就不会触发事件。

  (function($){    
      $(function(){  
          //document ready
          $("input").filter(':visible').blur(function() {
              if ($(this).hasClass('red') && $(this).val() !== "")) {
                  $(this).removeClass('red');
              } else if (!$(this).hasClass('red') && $(this).val() === "") {
                  $(this).addClass('red');                     
              }
          });
      });            
   })(jQuery); 

接下来将其添加到您的 html 中

<input style="display: none;" type="submit" id="submitHidden" value="hidden">

如果所有内容都检查完毕，则使用它进行提交...这样您就不会遇到 .preventDefault() 的任何问题，因为您不需要使用它。

$("#submitHidden").trigger('click');

或者如果你想变得超级酷。设置超时以在 500-750 毫秒空闲后检查他们的输入并使用 ajax 进行身份验证，如果登录成功，请登录。如果您也可以删除登录按钮会很好，但如果他们意外输入了无效密码将只是坐在那里，因此他们仍然需要能够在输入无效凭据的情况下提交。

     function startTimer() {
         $(document).keyup(function(e) {
             clearTimeout(window.timer);
             window.timer = setTimeout(function() {
                console.log('ajaxSubmit');
                 if (ajaxAuthenticate()) {
                     alert("auto login in progress...");
                 }
             }, 2000);
         });

         $(document).mouseup(function(e) { 
            clearTimeout(window.timer); 
         });
     };

     $("input").filter(':visible').on('focus', function() {
         startTimer();
     }); 

这就是我个人将如何编写您的提交表单功能...

     $.fn.submitForm = function() {

         $("input").filter(':visible').on("happy", function() {
             if ($(this).val() === "") {
                 $(this).addClass('red');
             }
         });

         $("input").filter(':visible').trigger("happy");  

         if( $("#pass").val() !== ""  && $("#user").val() !== "" ){
             $("#submitHidden").trigger('click');
         }
    }

这是我的实际版本（自动登录）。尝试使用用户名“test”和密码“test”，然后不要点击登录按钮，稍等片刻。

FIDDLE (autologin version)