Можно ли как нибудь укоротить скрипт?

Тема в разделе "JavaScript", создана пользователем dosqa, 22 май 2018.

  1. dosqa

    dosqa

    Регистр.:
    2 янв 2013
    Сообщения:
    161
    Симпатии:
    105
    Подскажите плз, как сократить этот код:
    Код:
    if (hasHtml5Validation()) {
      $('.validate-form').submit(function (e) {
      if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
      } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
      var form_data = $(this).serialize();
      $.ajax({
      type: "POST",
      url: "send.php",
      data: form_data,
      success: function() {
      $('.validate-form').empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
    
      }});
      }
      });
      $('.validate-form1').submit(function (e) {
      if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
      } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
      var form_data = $(this).serialize();
      $.ajax({
      type: "POST",
      url: "send.php",
      data: form_data,
      success: function() {
      $('.validate-form1').empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
    
      }});
      }
      });
      $('.validate-form2').submit(function (e) {
      if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
      } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
      var form_data = $(this).serialize();
      $.ajax({
      type: "POST",
      url: "send.php",
      data: form_data,
      success: function() {
      $('.validate-form2').empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
    
      }});
      }
      });
      $('.validate-form3').submit(function (e) {
      if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
      } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
      var form_data = $(this).serialize();
      $.ajax({
      type: "POST",
      url: "send.php",
      data: form_data,
      success: function() {
      $('.validate-form3').empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
    
      }});
      }
      });
     
    Последнее редактирование: 22 май 2018
  2. Keegan

    Keegan Создатель

    Регистр.:
    20 апр 2009
    Сообщения:
    44
    Симпатии:
    8
    У вас этот участок:
    Код:
    if (!this.checkValidity()) {
      e.preventDefault();
      $(this).addClass('invalid');
      $('#status').html('invalid');
      } else {
      $(this).removeClass('invalid');
      $('#status').html('submitted');
      var form_data = $(this).serialize();
      $.ajax({
      type: "POST",
      url: "send.php",
      data: form_data,
      success: function() {
      $('.validate-form1').empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
    
      }});
      }
    Повторяется три раза - можете вынести его в отдельную функцию, и передавать параметром селектор формы(который '.validate-form1', '.validate-form2' и т.п), например.
     
  3. dosqa

    dosqa

    Регистр.:
    2 янв 2013
    Сообщения:
    161
    Симпатии:
    105
    А как сделать что бы верхний сабмит, выдавал апенд в нужную форму, то есть если с верху я перечислю '.validate-form1', '.validate-form2' , то снизу можно так же перечислить? + они идут по порядку я думаю это можно как то использовать.

    Все понял, сделал так
    Код:
    if (hasHtml5Validation()) {
      $('.validate-form1, .validate-form2, .validate-form3').submit(function (e) {
        if (!this.checkValidity()) {
                e.preventDefault();
          $(this).addClass('invalid');
          $('#status').html('invalid');
        } else {
          $(this).removeClass('invalid');
          $('#status').html('submitted');
                var form_data = $(this).serialize();
                $.ajax({
                type: "POST",
                url: "send.php",
                data: form_data,          
              });
             $(this).empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
        }
      });
    };
    Тогда перечисление не нужно и можно добавить один класс всем формам и получится такое
    Код:
    if (hasHtml5Validation()) {
      $('.validate-form').submit(function (e) {
        if (!this.checkValidity()) {
                e.preventDefault();
          $(this).addClass('invalid');
          $('#status').html('invalid');
        } else {
          $(this).removeClass('invalid');
          $('#status').html('submitted');
                var form_data = $(this).serialize();
                $.ajax({
                type: "POST",
                url: "send.php",
                data: form_data,          
              });
             $(this).empty().append($('<h3 class="success">Спасибо за заказ, в ближайшее время наш менеджер свяжется с вами.<h3>'));
        }
      });
    };

     
    Последнее редактирование модератором: 22 май 2018
    Keegan и Sorcus нравится это.
  4. kperi

    kperi Писатель

    Регистр.:
    3 апр 2018
    Сообщения:
    3
    Симпатии:
    4
    отсутствие некоторых критических точек
    - как проверка статуса

    Код:
    if (hasHtml5Validation ()) {
    var sMsg='<h3 class = "success"> Thanks for the order, our manager will contact you in the near future. <h3>';
    var fMsg='<h3 class = "fail"> Order failed <h3>';
      $('.validate-form1, .validate-form2, .validate-form3').submit(function(e) {
        if(!this.checkValidity()) {
          $(this).addClass('invalid');
          $('#status').html('invalid');
          e.preventDefault();
        } else {
                var form_data = $ (this).serialize();
                $ .ajax ({
                type: "POST",
                url: "send.php",
                data: form_data,
                success: function(data){
                    $ (this).removeClass('invalid');
                    $ ('#status')html('submitted');      
                    $(this).empty().append(sMsg);
                },
                error: function(data){$(this).empty().append(fMsg);}
              });
        }
      });
    };};
     
    Последнее редактирование: 29 май 2018
  5. dosqa

    dosqa

    Регистр.:
    2 янв 2013
    Сообщения:
    161
    Симпатии:
    105
    Да, я просто не весь скрипт выложил, на самом деле они не особо нужны, html5 эти строки выводит.