title: Semantic UI : api vs ajax calls
body: <p>I have a form with two fields, username and password. I am using Semantic UI / JQuery for submitting the form. </p>
  
  <pre><code>  $(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;
                          }
                      });
  
                  }
              });
      });
  </code></pre>
  
  <p>This, however doesn't work. If I was to replace Semantic UI .api call with $.ajax call, it works well. </p>
  
  <pre><code>        $(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();
                       }
                   });
  
  
      });
  </code></pre>
  
  <p>Could someone help me figure out why .api semantic calls doesn't work ?</p>