表單提交與的onsubmit

Question

我的形式onSubmit呼籲：

onsubmit="validate(this); return false;" 

validate();如下：

function validate(obj) { 
    $.ajax({ 
     url : "ajax/validate_check.php", 
     type : "POST", 
     data : $("#" + obj.id).serialize(), 
     success : function(data) { 
      $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') 
      data = $.parseJSON(data); 
      if(data['error_count'] >= 1) { 
       $.each(data, function(i, item) { 
        $('#' + i).addClass('form_errors'); 
       }); 
      } else { 
       $('#' + obj.id).submit(); 
      } 
     } 
    }); 
} 

當我有0錯誤，它試圖提交表單，但我發現一個無限循環。我意識到這是因爲我的onSubmit再次調用該函數。我準備好後如何提交表格？

編輯：

我只是尋找最好的方法來解決這個問題。我想驗證onSubmit對用戶的快速響應，然後我想實際上按照我知道數據在哪裏的方式提交表單（例如，register.php將註冊用戶）。這就是爲什麼我沒有執行聯合動作/驗證腳本，因爲我不知道我要提交哪種表單。我可能需要重新排列我這樣做的方式，所以任何幫助將不勝感激。

Answer 1

刪除onsubmit="validate(this); return false;"

，並使用以下功能：

$('form').submit(function(e){ 
    e.preventDefault(); 
    var $form = $(this), 
     $formId = $form.attr('id'), 
     $formName = $form.attr('name'); 

    $.ajax({ 
     url : "ajax/validate_check.php", 
     type : "POST", 
     data : $("#" + $formId).serialize(), 
     success : function(data) { 
      $('#' + $formId + ' :input.form_errors').removeClass('form_errors') 
      data = $.parseJSON(data); 
      if(data['error_count'] >= 1) { 
       $.each(data, function(i, item) { 
        $('#' + i).addClass('form_errors'); 
       }); 
      } else { 
       document.forms[$formName].submit(); 
      } 
     } 
    }); 
}); 

小提琴，您可以與形式id或name測試：http://jsfiddle.net/67rvg/3/

Answer 2

我不會在您的其他分支中發出另一個提交，但返回一個真正的值。

在你的onsubmit我會做onsubmit =「返回驗證（這）;」

Answer 3

不要submit再次使用在一個循環中調用提交，就像你說的，你會...只是後一切都像一個提交：由submitForm()

改變你的$('#' + obj.id).submit();線，並添加

現在

function submitForm() { 
    var form = $("#my_form"), 
     url = form.attr("action"), 
     dt = form.serialize(); 

    $.post(url, dt, function(data) { 
     // your form was post'd successfully 
    }); 
} 

---

，你知道如何工作的，爲什麼發明了呢？

爲什麼你不使用jQuery Validate和remote validation爲你工作？

Answer 4

這應該工作：在重新提交之前取消綁定事件。取而代之的

function validate(obj) { 
    $.ajax({ 
     url : "ajax/validate_check.php", 
     type : "POST", 
     data : $("#" + obj.id).serialize(), 
     success : function(data) { 
      $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') 
      data = $.parseJSON(data); 
      if(data['error_count'] >= 1) { 
       $.each(data, function(i, item) { 
        $('#' + i).addClass('form_errors'); 
       }); 
      } else { 
       $('#' + obj.id).submit(); 
      } 
     } 
    }); 
} 

嘗試

function validate(obj) { 
    $.ajax({ 
     url : "ajax/validate_check.php", 
     type : "POST", 
     data : $("#" + obj.id).serialize(), 
     success : function(data) { 
      $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') 
      data = $.parseJSON(data); 
      if(data['error_count'] >= 1) { 
       $.each(data, function(i, item) { 
        $('#' + i).addClass('form_errors'); 
       }); 
      } else { 
       $('#' + obj.id).unbind('submit').submit(); 
      } 
     } 
    }); 
} 

Answer 5

在你塊

} else { 
     $('#' + obj.id).submit(); 
    } 

比寧願做一個實際的表單提交使用另一個Ajax調用您的數據發送到您的形式的行動端點：

} else { 

    $.ajax({ 
     url : obj.action 
     ,type : obj.method 
     ,data : $(obj).serialize() 
     ,success : function() { 
      // show success message/close window/ etc 
     } 
     , error: function() { 
      // show error saving form message 
     } 
    }); 
} 

這樣，如果表單提交出現問題，您將能夠更好地捕獲結果。

Answer 6

1. 不要使用onsubmit屬性，它是將JavaScript混合到HTML標記中，並違背最佳實踐。
2. 爲什麼你不進行註冊功能的驗證部分（服務器端）。這樣你就不會像你需要的那樣多次往返。遵循最佳實踐，您應該儘可能少地提供http請求。您可以根據功能將您的php腳本整理到文件夾中。更容易知道正在提交什麼表單。這樣，爲每個表單提交創建一個唯一的驗證腳本也將變得更加容易。您也可以使用REQUEST_URI服務器變量來確定您要提交的表單。

See here for instructions on accessing the REQUEST URI of the request within a php script.

如果你正在做的每提交一個表單常見的驗證，你可以移動到一個單獨的PHP文件，並將其導入，將使用功能的所有文件。該功能將在您將其導入到的腳本中提供。

See here for instructions on including files in php.

那麼你可以添加自定義驗證到每一個人的腳本。有一天，您將很可能需要對您的某些表單進行自定義驗證。

• UTIL/validation_util.php
• AJAX /用戶/ register.php
• AJAX /用戶/ login.php中
• AJAX /用戶/ logout.php
• AJAX /產品/搜索。 PHP
• AJAX /產品/ detail.php
• AJAX /產品/ addToCart.php

• 等...

  $('#formId').on('submit', function (event) { 
  
  event.preventDefault(); 
  
  $.ajax({ 
      url : "ajax/user/register.php", 
      type : "POST", 
      data : $(this).serialize(), 
      success : function(data) { 
       $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') 
       data = $.parseJSON(data); 
       if(data['error_count'] >= 1) { 
        $.each(data, function(i, item) { 
         $('#' + i).addClass('form_errors'); 
        }); 
       } 
      } 
  }); 
  });