Advertisement
svfedorof

Untitled

Dec 8th, 2014
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.42 KB | None | 0 0
  1. <form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/118823" id="mad_mimi_signup_form" method="post" target="_blank">
  2. <div style="margin:0;padding:0;display:inline">
  3. <input name="utf8" type="hidden" value="✓"/>
  4. </div>
  5. <div class="mimi_field required">
  6. <label for="signup_email">Электронная почта*</label>
  7. <br/>
  8. <input id="signup_email" name="signup[email]" type="text" data-required-field="Это необходимое поле для заполнения" placeholder="you@example.com"/>
  9. </div>
  10. <div class="mimi_field">
  11. <input type="submit" class="submit" value="Подписаться" id="webform_submit_button" data-default-text="Подписаться" data-submitting-text="отправляется…" data-invalid-text="↑ Вы забыли некоторые необходимые поля" data-choose-list="↑ Выберите список" data-thanks="Спасибо за проявленный интерес!">
  12. </input>
  13. </div>
  14. </form>
  15. <script type="text/javascript">
  16. (function(global) {
  17. function serialize(form){if(!form||form.nodeName!=="FORM"){return }var i,j,q=[];for(i=form.elements.length-1;i>=0;i=i-1){if(form.elements[i].name===""){continue}switch(form.elements[i].nodeName){case"INPUT":switch(form.elements[i].type){case"text":case"hidden":case"password":case"button":case"reset":case"submit":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"checkbox":case"radio":if(form.elements[i].checked){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value))}break;case"file":break}break;case"TEXTAREA":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"SELECT":switch(form.elements[i].type){case"select-one":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break;case"select-multiple":for(j=form.elements[i].options.length-1;j>=0;j=j-1){if(form.elements[i].options[j].selected){q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].options[j].value))}}break}break;case"BUTTON":switch(form.elements[i].type){case"reset":case"submit":case"button":q.push(form.elements[i].name+"="+encodeURIComponent(form.elements[i].value));break}break}}return q.join("&")};
  18.  
  19.  
  20. function extend(destination, source) {
  21. for (var prop in source) {
  22. destination[prop] = source[prop];
  23. }
  24. }
  25.  
  26. if(!Mimi) var Mimi = {};
  27. if(!Mimi.Signups) Mimi.Signups = {};
  28.  
  29. Mimi.Signups.EmbedValidation = function() {
  30. this.initialize();
  31.  
  32. if(document.addEventListener) {
  33. this.form.addEventListener('submit', this.onFormSubmit.bind(this));
  34. } else {
  35. this.form.attachEvent('onsubmit', this.onFormSubmit.bind(this));
  36. }
  37. };
  38.  
  39. extend(Mimi.Signups.EmbedValidation.prototype, {
  40. initialize: function() {
  41. this.form = document.getElementById('mad_mimi_signup_form');
  42. this.submit = document.getElementById('webform_submit_button');
  43. this.callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
  44. },
  45.  
  46. onFormSubmit: function(e) {
  47. e.preventDefault();
  48.  
  49. this.validate();
  50. if(this.isValid) {
  51. this.submitForm();
  52. } else {
  53. this.revalidateOnChange();
  54. }
  55. },
  56.  
  57. validate: function() {
  58. this.isValid = true;
  59. this.emailValidation();
  60. this.fieldAndListValidation();
  61. this.updateFormAfterValidation();
  62. },
  63.  
  64. emailValidation: function() {
  65. var email = document.getElementById('signup_email'),
  66. validEmail = /.+@.+\..+/;
  67.  
  68. if(!validEmail.test(email.value)) {
  69. this.textFieldError(email);
  70. this.isValid = false;
  71. } else {
  72. this.removeTextFieldError(email);
  73. }
  74. },
  75.  
  76. fieldAndListValidation: function() {
  77. var fields = this.form.querySelectorAll('.mimi_field.required');
  78.  
  79. for(var i = 0; i < fields.length; ++i) {
  80. var field = fields[i],
  81. type = this.fieldType(field);
  82. if(type == 'checkboxes' || type == 'radio_buttons') {
  83. this.checkboxAndRadioValidation(field);
  84. } else {
  85. this.textAndDropdownValidation(field, type);
  86. }
  87. }
  88. },
  89.  
  90. fieldType: function(field) {
  91. var type = field.querySelectorAll('.field_type');
  92.  
  93. if(type.length > 0) {
  94. return type[0].getAttribute('data-field-type');
  95. } else if(field.className.indexOf('checkgroup') >= 0) {
  96. return 'checkboxes';
  97. } else {
  98. return 'text_field';
  99. }
  100. },
  101.  
  102. checkboxAndRadioValidation: function(field) {
  103. var inputs = field.getElementsByTagName('input'),
  104. selected = false;
  105.  
  106. for(var i = 0; i < inputs.length; ++i) {
  107. var input = inputs[i];
  108. if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
  109. }
  110.  
  111. if(selected) {
  112. field.className = field.className.replace(/ invalid/g, '');
  113. } else {
  114. if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
  115. this.isValid = false;
  116. }
  117. },
  118.  
  119. textAndDropdownValidation: function(field, type) {
  120. var inputs = field.getElementsByTagName('input');
  121.  
  122. for(var i = 0; i < inputs.length; ++i) {
  123. var input = inputs[i];
  124. if(input.name.indexOf('signup') >= 0) {
  125. if(type == 'text_field') {
  126. this.textValidation(input);
  127. } else {
  128. this.dropdownValidation(field, input);
  129. }
  130. }
  131. }
  132. this.htmlEmbedDropdownValidation(field);
  133. },
  134.  
  135. textValidation: function(input) {
  136. if(input.id == 'signup_email') return;
  137.  
  138. var val = input.value;
  139. if(val == '') {
  140. this.textFieldError(input);
  141. this.isValid = false;
  142. } else {
  143. this.removeTextFieldError(input)
  144. }
  145. },
  146.  
  147. dropdownValidation: function(field, input) {
  148. var val = input.value;
  149. if(val == '') {
  150. if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
  151. this.onSelectCallback(input);
  152. this.isValid = false;
  153. } else {
  154. field.className = field.className.replace(/ invalid/g, '');
  155. }
  156. },
  157.  
  158. htmlEmbedDropdownValidation: function(field) {
  159. var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
  160.  
  161. for(var i = 0; i < dropdowns.length; ++i) {
  162. var dropdown = dropdowns[i],
  163. val = dropdown.value;
  164. if(val == '') {
  165. if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
  166. this.isValid = false;
  167. dropdown.onchange = this.validate.bind(this);
  168. } else {
  169. field.className = field.className.replace(/ invalid/g, '');
  170. }
  171. }
  172. },
  173.  
  174. textFieldError: function(input) {
  175. input.className = 'required invalid';
  176. input.placeholder = input.getAttribute('data-required-field');
  177. },
  178.  
  179. removeTextFieldError: function(input) {
  180. input.className = 'required';
  181. input.placeholder = '';
  182. },
  183.  
  184. onSelectCallback: function(input) {
  185. if(typeof Widget == 'undefined' ||
  186. Widget.BasicDropdown == undefined) return;
  187.  
  188. var dropdownEl = input.parentNode,
  189. instances = Widget.BasicDropdown.instances;
  190.  
  191. for(var i = 0; i < instances.length; ++i) {
  192. var instance = instances[i];
  193. if(instance.wrapperEl == dropdownEl) {
  194. instance.onSelect = this.validate.bind(this);
  195. }
  196. }
  197. },
  198.  
  199. updateFormAfterValidation: function() {
  200. this.form.className = this.setFormClassName();
  201. this.submit.value = this.submitButtonText();
  202. this.submit.disabled = !this.isValid;
  203. this.submit.className = this.isValid ? 'submit' : 'disabled';
  204. },
  205.  
  206. setFormClassName: function() {
  207. var name = this.form.className;
  208.  
  209. if(this.isValid) {
  210. return name.replace(/\s?mimi_invalid/, '');
  211. } else {
  212. if(name.indexOf('mimi_invalid') == -1) {
  213. return name += ' mimi_invalid';
  214. } else {
  215. return name;
  216. }
  217. }
  218. },
  219.  
  220. submitButtonText: function() {
  221. var invalidFields = document.querySelectorAll('.invalid'),
  222. text;
  223.  
  224. if(this.isValid || invalidFields == undefined) {
  225. text = this.submit.getAttribute('data-default-text');
  226. } else {
  227. if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
  228. text = this.submit.getAttribute('data-invalid-text');
  229. } else {
  230. text = this.submit.getAttribute('data-choose-list');
  231. }
  232. }
  233. return text;
  234. },
  235.  
  236. submitForm: function() {
  237. this.formSubmitting();
  238.  
  239. var _this = this;
  240. window[this.callbackName] = function(response) {
  241. delete window[this.callbackName];
  242. document.body.removeChild(script);
  243. _this.onSubmitCallback(response);
  244. };
  245.  
  246. var script = document.createElement('script');
  247. script.src = this.formUrl('json');
  248. document.body.appendChild(script);
  249. },
  250.  
  251. formUrl: function(format) {
  252. var action = this.form.action,
  253. divider = action.indexOf('?') >= 0 ? '&' : '?';
  254.  
  255. if(format == 'json') action += '.json';
  256.  
  257. return action + divider + 'callback=' + this.callbackName + '&' + serialize(this.form);
  258. },
  259.  
  260. formSubmitting: function() {
  261. this.form.className += ' mimi_submitting';
  262. this.submit.value = this.submit.getAttribute('data-submitting-text');
  263. this.submit.disabled = true;
  264. this.submit.className = 'disabled';
  265. },
  266.  
  267. onSubmitCallback: function(response) {
  268. if(response.success) {
  269. this.onSubmitSuccess(response.result);
  270. } else {
  271. top.location.href = this.formUrl('html');
  272. }
  273. },
  274.  
  275. onSubmitSuccess: function(result) {
  276. if(result.has_redirect) {
  277. top.location.href = result.redirect;
  278. } else if(result.single_opt_in || result.confirmation_html == null) {
  279. this.disableForm();
  280. this.updateSubmitButtonText(this.submit.getAttribute('data-thanks'));
  281. } else {
  282. this.showConfirmationText(result.confirmation_html);
  283. }
  284. },
  285.  
  286. showConfirmationText: function(html) {
  287. var fields = this.form.querySelectorAll('.mimi_field');
  288.  
  289. for(var i = 0; i < fields.length; ++i) {
  290. fields[i].style['display'] = 'none';
  291. }
  292.  
  293. (this.form.querySelectorAll('fieldset')[0] || this.form).innerHTML = html;
  294. },
  295.  
  296. disableForm: function() {
  297. var elements = this.form.elements;
  298. for(var i = 0; i < elements.length; ++i) {
  299. elements[i].disabled = true;
  300. }
  301. },
  302.  
  303. updateSubmitButtonText: function(text) {
  304. this.submit.value = text;
  305. },
  306.  
  307. revalidateOnChange: function() {
  308. var fields = this.form.querySelectorAll(".mimi_field.required");
  309.  
  310. for(var i = 0; i < fields.length; ++i) {
  311. var inputs = fields[i].getElementsByTagName('input');
  312. for(var j = 0; j < inputs.length; ++j) {
  313. inputs[j].onchange = this.validate.bind(this);
  314. }
  315. }
  316. }
  317. });
  318.  
  319. if (document.addEventListener) {
  320. document.addEventListener("DOMContentLoaded",
  321. new Mimi.Signups.EmbedValidation);
  322. }
  323. else {
  324. window.attachEvent('onload', function() {
  325. new Mimi.Signups.EmbedValidation();
  326. });
  327. }
  328. })(this);
  329. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement