SHARE
TWEET

Untitled

a guest Jul 19th, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import $ from "jquery";
  2.  
  3. import Scroll from "../../utils/Scroll";
  4.  
  5. class Form {
  6.     constructor($form) {
  7.         this.form = $form;
  8.  
  9.         this.data = {
  10.             action: this.form.attr('action'),
  11.             method: this.form.attr('method'),
  12.             reset: this.form.find('.form__reset'),
  13.             ajax: this.form.data('ajax') !== false ? true : void 0
  14.         };
  15.  
  16.         this.form.on('submit', (event) => {
  17.             this.submitHandler(event);
  18.         });
  19.  
  20.         this.data.reset.on('click', (event) => {
  21.             this.clearHandler($(event.currentTarget), event);
  22.         });
  23.     }
  24.  
  25.     submitHandler(event) {
  26.         if (!this.validateForm()) {
  27.             this.send();
  28.         }
  29.  
  30.         if (!$('html').hasClass('scroll-disable') && !this.form.hasClass('form_dirty')) {
  31.             Scroll.goToElement(this.form, 650);
  32.         }
  33.  
  34.         event.preventDefault();
  35.     }
  36.  
  37.     clearHandler($this, event) {
  38.         let $form = $this.parents('form');
  39.  
  40.         this.clearForm($form);
  41.  
  42.         event.preventDefault();
  43.     }
  44.  
  45.     validateField($element) {
  46.         const $field = {
  47.             type: $element.attr('type'),
  48.             val: $element.val()
  49.         };
  50.  
  51.         switch ($field.type) {
  52.             case 'text':
  53.                 return $field.val.replace(/\s+/g, '');
  54.             case 'email':
  55.                 let pattern = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  56.  
  57.                 return pattern.test($field.val);
  58.             case 'password':
  59.                 if ($element.hasClass('js-password-repeat')) {
  60.                     let password = $('.js-password').val(),
  61.                         passwordRepeat = $('.js-password-repeat').val();
  62.  
  63.                     return password === passwordRepeat;
  64.                 }
  65.  
  66.                 return $field.val.replace(/\s+/g, '');
  67.             default:
  68.                 return $field.val.replace(/\s+/g, '');
  69.         }
  70.     }
  71.  
  72.     validateForm() {
  73.         const $inputs = this.form.find('input, select, textarea').filter('[required]:visible');
  74.  
  75.         let error = false,
  76.             countError = 0;
  77.  
  78.         this.form.removeClass('form_dirty');
  79.         this.form.find('.input-row').removeClass('input-row_wrong');
  80.  
  81.         $inputs.each((index, element) => {
  82.             let $this = $(element);
  83.  
  84.             if (!this.validateField($this)) {
  85.                 countError++;
  86.  
  87.                 this.form.addClass('form_dirty');
  88.                 $this.closest('.input-row').addClass('input-row_wrong');
  89.                 error = true;
  90.  
  91.                 if (countError < 2) {
  92.                     $this.focus();
  93.                 }
  94.             }
  95.         });
  96.  
  97.         return error
  98.     }
  99.  
  100.     clearForm($form) {
  101.         $form.removeClass('form_success');
  102.         $form[0].reset();
  103.     }
  104.  
  105.     send() {
  106.         if (this.data.ajax) {
  107.             this.form.addClass('form_loading');
  108.  
  109.             $.ajax({
  110.                 type: this.data.method,
  111.                 url: this.data.action,
  112.                 data: new FormData(this.form[0]),
  113.                 cache: false,
  114.                 contentType: false,
  115.                 processData: false,
  116.                 success: (data) => {
  117.                     let response = JSON.parse(data).response;
  118.  
  119.                     this.form.removeClass('form_loading');
  120.  
  121.                     if (response === 'success') {
  122.                         this.form.addClass('form_success');
  123.                         this.form[0].reset();
  124.                     }
  125.  
  126.                     if (response === 'already') {
  127.                         this.form.addClass('form_already');
  128.  
  129.                         setTimeout(() => {
  130.                             this.form.removeClass('form_already');
  131.                         }, 6000);
  132.                     }
  133.  
  134.                     if (response !== 'success' && response !== 'already') {
  135.                         this.form.addClass('form_error');
  136.  
  137.                         setTimeout(() => {
  138.                             this.form.removeClass('form_error');
  139.                         }, 6000);
  140.                     }
  141.                 },
  142.                 error: () => {
  143.                     this.form.removeClass('form_loading');
  144.                     this.form.addClass('form_error');
  145.  
  146.                     setTimeout(() => {
  147.                         this.form.removeClass('form_error');
  148.                     }, 6000);
  149.                 }
  150.             });
  151.         } else {
  152.             this.form.submit();
  153.         }
  154.     }
  155. }
  156.  
  157. export default Form;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top