Question

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

我收到以下错误：未捕获的ReferenceError：commitForm未定义kontroller.php：89 onclick

的login.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

这会有用......

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

你的这一行没有用户ID的哈希符号..所以修复它。

if（$（“＃pass”）。val（）！=“”＆amp;＆amp; $（“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（）的任何问题，因为你不需要使用它。< / p>

$("#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)

Answer 2

将submitForm（）函数保持在

之外

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

将功能置于其下方

Answer 3

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

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

然后，您可以使用jquery来处理click事件：

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

那就是它！

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

3 个答案: