は、event.preventDefault（）を取得したり、falseを返して動作することはできません。朝から夕方まで試してみた

Question

ユーザーがjqueryを使用してログインの検証を行い、Javascriptが無効な場合に備えてPHPのフォールバックを使用するフォームを作成しています。ユーザ自身のログインフォームはライトボックスです。私はそれを設計しようとしている方法は、エラーがある場合、それを閉じたり、ユーザーをリダイレクトしたりせずにライトボックスにエラーメッセージが直接現れるようにすることです。私は基本的に物事をチェックしています。 'username'と 'password'フィールドが入力されていて、 'username'と 'password'フィールドが有効である場合。フィールドが記入されているかどうかを確認するとき、Javascriptは完全に機能します。 'return false'が動作し、ライトボックスの中にエラーメッセージが表示され、すべてが「ホンキードリー」です。検証に関しては、ajaxを使用してデータベースをチェックし、問題がある場合はfalseを返しません。

実際に何が起きているのかは、ライト・メッセージの上部に「will will」と表示され、それがPHPに送信され、PHPがリダイレクトしているということです。

ここにコードの内訳を示します。

$('body').on('click','[name=submit11]',function(){ 
    $('.error').remove(); 
    var req = ['username','password']; 
    var div = '#login_form'; 
    validate(div,req); 
    if($('.error').length == 0){ 
     var login = true; 
     var username = $(this).siblings('[name=username]').val(); 
     var password = $(this).siblings('[name=password]').val(); 
     $.post('../ajax/multipurpose.php', {login:login,username:username,password:password},function(data){ 
      if($.trim(data) != ''){ 
       $('#login_form').prepend("<div class='error'>"+data+"</div>"); 
      }                    
     }); 
    } 
    if($('.error').length > 0){ 
     event.stopPropagation(); 
     return false; 
    } 
}); 

validate関数はjqueryで使用しているカスタム関数であり、完全に動作しています。問題は、ajaxが実行された後の2番目のif文の中で始まります。このif文では、ajaxがエラーを検出した場合にエラーが発生します。 multipurpose.phpページ内のコードは次のとおりです。

//Used to validate the username and password via ajax 
if(isset($_POST["login"])): 
    $username = trim($_POST["username"]); 
    $password = trim($_POST["password"]); 
    if(!$found_user = User::authenticate($username,$password)): 
     echo "Username/Password combination is invalid."; 
    endif; 
endif; 

私が気づいたもう一つの問題が、エラーがあると私は警告と入力することである（$（「エラー」）。長さ）私は上をクリックした後、0の値は、警告ボックスに表示してます警告ボックスに「OK」と入力すると、ライトボックスに値が表示され、PHPに送信されます。これはajax部分のみであり、validate（）カスタム関数ではありません。誰かがそれを見る必要がある場合に備えて、validate（）関数のコードを次に示します。

function validate(div,fields){ 
    var boxes = ['pounds_or_kilos','activity']; 
    $(div+' .error').remove(); 
    $(fields).each(function(key,value){ 
     if($.inArray(value,boxes) == -1){ 
      text = $('[name='+value+']').val(); 
      if($.trim(text) == ''){ 
       removeLoader(); 
       addError(div,value); 
      } 
     }else if(!$('[name='+value+']:checked').length){ 
      addError(div,value); 
     } 
    }); 
} 

私はその2番目のif文の中で何度も試してみました。私は偽を返そうとしました...私は問題のないサイトの多くの領域で使用して、私はevent.preventDefault（）を試してみました。私はeをclick関数の中に入れてみて、e.preventDefault（）を使ってみました。また、event.stopPropagation（）を試みましたが、まだ何もありませんでした。誰か助けてください。

Answer 1

$.postは非同期です。したがって、エラーがある場合は、2番目のチェックif($('.error').length > 0)の後に追加して、フォームの送信動作を妨げませんでした。

何ができることは、すべての場合には、この動作を防ぐとAjaxリクエストに関するエラーなしならば、（ネイティブDOMメソッドを使用して）手動でformを提出している、例えば：

$('body').on('click', '[name=submit11]', function() { 
    var form = $(this).closest('form').get(0); 
    $('.error').remove(); 
    var req = ['username', 'password']; 
    var div = '#login_form'; 
    validate(div, req); 
    if ($('.error').length == 0) { 
    var login = true; 
    var username = $(this).siblings('[name=username]').val(); 
    var password = $(this).siblings('[name=password]').val(); 
    $.post('../ajax/multipurpose.php', { 
     login: login, 
     username: username, 
     password: password 
    }, function(data) { 
     if ($.trim(data) != '') { 
     $('#login_form').prepend("<div class='error'>" + data + "</div>"); 
     } 
     else { 
     form.submit(); 
     } 
    }); 
    } 
    return false; 
});