Semantic UI: Api vs Ajax Anrufe

Question

Ich habe ein Formular mit zwei Feldern, Benutzername und Passwort. Ich verwende Semantic UI/JQuery zum Übermitteln des Formulars.

$(document).ready(function() { 

     $('#ValidateUser').form(
      { 
       on: 'submit', 
       fields: { 
        username: { 
         identifier: 'username', 
         rules: [{ 
          type: 'empty', 
          prompt:'Username cannot be empty' 
         }] 
        }, 
        password: { 
         identifier: 'password', 
         rules: [{ 
          type: 'empty', 
          prompt:'Password cannot be emtpy' 
         }] 
        } 
       }, 
       onSuccess: function(event){ 
        event.preventDefault(); 
        $.api({ 
         url: '@Url.Action("Login", "Validation")', 
         serializeForm: true, 
         data: new FormData(this), 
         onSuccess: function (result) { 
          result.preventDefault(); 
          if (result.Success) { 
           window.location = "/Dashboard/Dashboard"; 
          } 
          else { 

           $('#formresult').append(result.Msg); 
          } 
          return false; 
         } 
        }); 

       } 
      }); 
    }); 

Dies funktioniert jedoch nicht. Wenn ich Semantic UI .api Aufruf mit $ .ajax Anruf ersetzen sollte, funktioniert es gut.

 $(document).ready(function() { 

     $('#submitbutton').click(function(){ 
      $('#formresult').hide(); 
     }); 

     $('#ValidateUser').form(
       { 
        on: 'blur', 
        fields: { 
         username: { 
          identifier: 'username', 
          rules: [{ 
           type: 'empty', 
           prompt: 'Username cannot be empty' 
          }] 
         }, 
         password: { 
          identifier: 'password', 
          rules: [{ 
           type: 'empty', 
           prompt: 'Password cannot be emtpy' 
          }] 
         } 
        }, 

        onSuccess: function (event) { 
         $('#formresult').hide(); 
         event.preventDefault(); 
         var formData = new FormData(this); 
         $.ajax({ 
          url: '@Url.Action("Login", "Validation")', 
          type: "POST", 
          dataType: "json", 
          contentType: "application/json; charset=utf-8", 
          data: formData, 
          contentType: false, 
          processData: false, 
          success: function (result) { 

           if (result.Success) { 
            window.location = "/Dashboard/Dashboard"; 
           } 
           else { 
            $('#formresult').show(); 
            $('#formresult').text(result.Msg); 
           } 


          }, 
          error: function (result) { 
           $('#formresult').show(); 
           $('#formresult').text(result); 
          } 
         }); 
         event.preventDefault(); 
        } 
       }); 


    }); 

Könnte jemand mir helfen herauszufinden, warum .api semantische Anrufe nicht funktioniert?

Answer 1

Verwaltet, um es selbst zu lösen, für zukünftige Referenz für den Fall, dass jemand in gleiche Schwierigkeiten läuft, hier ist, wie ich es behoben. Ich habe den .api-Aufruf weitergeleitet, anstatt ihn innerhalb des Erfolgs der Formularvalidierung aufzurufen.

Hier ist der vollständige Code.

$(document).ready(function() { 

     var urllink = '@Url.Action("Login", "Validation")'; 


     $('#ValidateUser').form(
           { 
            on: 'blur', 
            fields: { 
             username: { 
              identifier: 'username', 
              rules: [{ 
               type: 'empty', 
               prompt: 'Username cannot be empty' 
              }] 
             }, 
             password: { 
              identifier: 'password', 
              rules: [{ 
               type: 'empty', 
               prompt: 'Password cannot be emtpy' 
              }] 
             } 
            }, 
            onSuccess: function (event) { 
             $('#formresult').hide(); 
             $('#formresult').text(''); 
             event.preventDefault(); 
             return false; 
            } 

           } 
           ) 
          .api({ 
           url: urllink, 
           method:'POST', 
           serializeForm: true, 
           data: new FormData(this), 
           onSuccess: function (result) { 
            $('#formresult').show(); 
            if (result.Success) { 
             window.location = "/Dashboard/Dashboard"; 
            } 
            else { 

             $('#formresult').append(result.Msg); 
            } 
            return false; 
           } 
       }); 


    });