JSFiddle - React, Tailwind, and code Playground
by z0ddak
HTML
<link rel="stylesheet" type="text/css" href="//yagool.ru/cb/include/jquery/autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="//yagool.ru/cb/include/jquery/autocomplete/lib/thickbox.css" />
<link rel="stylesheet" type="text/css" href="//yagool.ru/cb/include/jquery/jquery-ui.css" />
<script src='//yagool.ru/blurb/blurb.js'></script>
<script src='//yagool.ru/blurb/sliding.form.js'></script>
<script src='//yagool.ru/blurb/jquery.maskedinput.min.js'></script>
<script src='//yagool.ru/blurb/icheck.js'></script>
<script src='//yagool.ru/cb/include/jquery/autocomplete/lib/jquery.ajaxQueue.js'></script>
<script src='//yagool.ru/cb/include/jquery/autocomplete/lib/thickbox-compressed.js'></script>
<script src='//yagool.ru/cb/include/jquery/autocomplete/jquery.autocomplete.js'></script>
<script src='//yagool.ru/cb/include/jquery/jquery-ui.min.js'></script>
<script src='//yagool.ru/cb/include/jquery/jquery.ui.datepicker.js'></script>
<script src='//yagool.ru/cb/include/jquery/i18n/jquery.ui.datepicker-ru.js'></script>
<iframe name="k_frame_upload_30" id="k_frame_upload_30" style='width:1px;height:1px;display:none;' onload='k_save_resp30(event);'></iframe>
<!-- form -->
<div class=k_result_text id='k_qst_res_30'>
<div id="steps">
<form id="k_qst_30" class="example1" name="k_qst_30" method="post" action="">
<fieldset class="step">
<legend>Информация</legend>
<p>
<label for="sity">Ваш город</label>
<input
type="text"
id='k_input_field_30_3450'
f_value="";
value=""
class="k_input_link_field"
onfocus="k_last_focus=this; this.nextSibling.className='k_drop_down_icon_hover';$(this).addClass('k_input_link_field_hover');"
onblur="k_last_focus=0; if (this.nextSibling!=k_under_mouse_object) {this.nextSibling.className='k_drop_down_icon';...CSS
/* ------ DEFAULTS ------ */
@font-face {
font-family: 'bicubik';
src: url('//yagool.ru/blurb/fonts/bicubik_central_europe.eot');
src: url('//yagool.ru/blurb/fonts/bicubik_central_europe.eot?#iefix') format('embedded-opentype'),
url('//yagool.ru/blurb/fonts/bicubik_central_europe.woff') format('woff'),
url('//yagool.ru/blurb/fonts/bicubik_central_europe.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Aaargh';
src: url('//yagool.ru/blurb/fonts/aaargh_cyrillic.eot');
src: url('//yagool.ru/blurb/fonts/aaargh_cyrillic.eot?#iefix') format('embedded-opentype'),
url('//yagool.ru/blurb/fonts/aaargh_cyrillic.woff') format('woff'),
url('//yagool.ru/blurb/fonts/aaargh_cyrillic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//yagool.ru/blurb/fonts/v8/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(//yagool.ru/blurb/fonts/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(//yagool.ru/blurb/fonts/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(//yagool.ru/blurb/fonts/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'),...JavaScript
/* Выполнение условий заполнения формы */
$(document).ready(function(){var h=/^[\u0410-\u042f\u0430-\u044f-\s]{2,20}$/i,i=/^[\u0430-\u044F\u0410-\u042F\u0451\u0401-\s]{2,30}$/i,j=/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,k=/^\([\d\)\s-]{1,}$/i,l=/^[\u0430-\u044F\u0410-\u042F\u0451\u04010-9-\,\s]{1,}$/i,
a=$("#k_input_field_30_3750");a.blur(function(){""!=a.val()?0==a.val().search(h)?($("#valid1")
.html('<div class="img-validyes"></div>'),$("#k_savebutton30").attr("disabled",!1),a.removeClass("valid-error").addClass("valid-ok")):($("#valid1")
.html('<div class="img-validno"></div>'),$("#k_savebutton30").attr("disabled",!0),a.addClass("valid-error")):($("#valid1")
.html('<div class="img-validno"></div>'),a.addClass("valid-error"),$("#k_savebutton30").attr("disabled",!0))});
var b=$("#k_input_field_30_3460");b.blur(function(){""!=b.val()?0==b.val().search(i)?($("#valid2")
.html('<div class="img-validyes"></div>'),$("#k_savebutton30").attr("disabled",!1),b.removeClass("valid-error").addClass("valid-ok")):($("#valid2")
.html('<div class="img-validno"></div>'),$("#k_savebutton30").attr("disabled",!0),b.addClass("valid-error")):($("#valid2")
.html('<div class="img-validno"></div>'),b.addClass("valid-error"),$("#k_savebutton30").attr("disabled",!0))});
var c=$("#k_input_field_30_3480");c.blur(function(){""!=c.val()?0==c.val().search(j)?($("#valid3")
.html('<div class="img-validyes"></div>'),$("#k_savebutton30").attr("disabled",!1),c.removeClass("valid-error").addClass("valid-ok")):($("#valid3")
.html('<div class="img-validno"></div>'),$("#k_savebutton30").attr("disabled",!0),c.addClass("valid-error")):($("#valid3")
.html('<div...