Отправка формы с 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 снова вызывает функцию. Как я могу отправить форму, когда я буду готов?

EDIT:

Я просто ищу лучший способ приблизиться к этому. Я хочу подтвердить onSubmit для быстрого ответа на пользователя, а затем я хочу отправить форму таким образом, я знаю, куда идут данные (например, register.php зарегистрирует пользователя). Вот почему я не выполняю комбинированный скрипт action/validate, потому что не знаю, какую форму я представляю. Мне, вероятно, нужно перестроить то, как я это делаю, поэтому любая помощь будет оценена по достоинству.

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

Я бы не выпустил еще одну подачу в вашу ветку else, но вернул истинное значение.

в вашем onsubmit я бы сделал onsubmit = "return validate (this);"

Answer 3

Не submit снова с помощью вызова представить, как вы говорите, вы будете в цикле ... просто разместить все, как представить:

$('#' + obj.id).submit(); изменения вашей линии по submitForm() и добавить

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
• Аякса/пользователь/register.php
• Аякса/пользователь/login.php
• Аякса/пользователь/logout.php
• Аякса/продукт/поиск. PHP
• Аякса/продукта/detail.php
• Аякса/продукта/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'); 
        }); 
       } 
      } 
  }); 
  });