HTMLフォームonsubmitが外部関数を実行していません

Question

私はHTMLフォームを持っていて、送信時にvalidate（）関数を呼び出す必要があります。

validate（）関数が "body"タグの最後にある "script"タグ内にある場合、サブミットは正常に機能します。

そうでない場合は、として、それは外部のjsファイル内に存在する場合にdocument.readyが使用されているにもかかわらず、検証（）関数を呼び出していない提出でhttps://jsfiddle.net/vg47127o/1/

HTML -

<form method="post" action="#" onsubmit="return validate()" name="loginForm" class="form-horizontal" role="form"> 

<div class="form-group"> 
<p class="error-block"><span class="glyphicon glyphicon-exclamation-sign"> </span> <span class="error-msg"></span></p> 
</div> 

<div class="form-group"> 
<label class="control-label col-sm-3" for="username">username: 
</label> 

<div class="col-sm-9"> 
    <input type="text" class="form-control digits-only" id="username" placeholder="Enter Username"> 
</div> 
</div> 

<div class="form-group"> 
<label class="control-label col-sm-3" for="password">Password:</label> 
<div class="col-sm-9"> 
    <input type="password" class="form-control" id="password" placeholder="Enter Password"> 
</div> 
</div> 

<div class="form-group"> 
<div class="col-sm-offset-4 col-sm-8"> 
    <button type="submit" id="loginBtn" class="btn btn-default">Log In</button> 
    <button type="reset" class="btn btn-default">Reset</button> 
</div> 
</div> 
</form> 

SCRIPT -

$(document).ready(function() { 

    var displayError = function(error, msg) { 
    $(".error-block .error-msg").text(msg); 
    if (error === true) 
     $(".error-block").show(); 
    else 
     $(".error-block").hide(); 
    return true; 
    }; 

    //Validating the input fields  
    var validate = function() { 
    var $username = $("#username").val(), 
     $password = $("#password").val(); 

    if ($username === '' || $password === '') { 
     displayError(true, ' Username or Password cannot be empty. '); 
     return false; 
    } else if ($username.length < 6 || $password.length < 6) { 
     displayError(true, ' Username and Password should be a minimum of 6 characters. '); 
     return false; 
    } else { 
     displayError(false, ' '); 
     return true; 
    } 
    }; 
}); 

アムは、私がここで何かを欠落しているか、何がその理由である可能性があります。

Answer 1

ここではupdated fiddleが動作しています。 validateがtrueを返さない場合は、submit（）イベントをトラップする必要があります。

これはあなたのjQueryに含まれるものです。

$("form").on("submit", function (event) { 
    if (!validate()) { 
     event.preventDefault(); 
    } 
}); 

次に、あなたの<form>タグは、単にこれであるあなたの検証（）関数の<form method="post" action="#" name="loginForm" class="form-horizontal" role="form">

FYI

理由だろう文書の準備が整っていれば、文書準備関数にスコープが設定されているため、インラインDOMイベントトリガーにはアクセスできません。 jQuery関数内でイベントハンドラを設定するか、ドキュメント準備関数の外部でvalidate（）関数を宣言する必要があります。

Answer 2

バリデーション変数のスコープは、$(document).readyに設定した無名関数です。つまり、グローバルスコープに存在するページからではなく、その関数内からのみアクセスできます。

代わり$(...).submit機能を使用して、イベントリスナーを追加します。

$(document).ready(function() { 

    /* *** */ 

    //Validating the input fields  
    $("[name=loginForm]").submit(function() { 
     var $username = $("#username").val(), 
      $password = $("#password").val(); 

     /* *** */ 

    }); 
});