JSFiddle - React, Tailwind, and code Playground

by Mikhail Tatsky

HTML

<script src="http://fancyjs.com/mt/thirdparty/jquery/jquery-1.11.0.min.js"></script>

<link href="http://fancyjs.com/mt/build/mt-min.css" rel="stylesheet">
<script src="http://fancyjs.com/mt/build/mt-min.js"></script>

JavaScript

FancyForm.vtype({
	type: 'email',
	re: /^(")?(?:[^\."])(?:(?:[\.])?(?:[\w\-!#$%&'*+\/=?\^_`{|}~]))*\1@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
	blankText: 'required',
	text: 'Incorect email'
});

var form = $('#form').FancyForm({
	title: 'Регистрация',
	width: 300,
	height: 250,
	inputWidth: 195,
	labelWidth: 60,
	
	url: 'submit.php',
	params: {
		//param1: 1,
	   // param2: 'string'
	},
	method: 'POST',
	
	defaults: {
		type: 'string'
	},
	items: [{
		label: 'Имя*',
		emptyText: 'Имя',
		valid: {
			blank: false,
			blankText: 'Необходимо заполнить'
		},
		name: 'name'
	},{
		label: 'Фамилия*',
		emptyText: 'Фамилия',
		valid: {
			blank: false,
			blankText: 'Необходимо заполнить'
		},
		name: 'surname'
	},{
		label: 'E-mail*',
		emptyText: 'E-mail',
		valid: {
			type: 'email',
			blank: false,
			blankText: 'Необходимо заполнить'
		},
		name: 'email'
	},{
		type: 'number',
		label: 'Телефон*',
		name: 'phone',
		valid: {
			blank: false,
			blankText: 'Необходимо заполнить'
		}
	}],
	buttons: [{
		text: 'Получить Дисконтную Карту',
		handler: function(){
			form.submit({
				params: {
					//param3: 'Some Values'
				},
				success: function(result, status, xhr){
					console.log('success');
					console.log(arguments);
				},
				error: function(xhr,status,error){
					console.log('error');
					console.log(arguments);
				}
			});
		}
	}]
});