JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://demo-place.esy.es/js/libs/jquery.maskedinput.min.js"></script>
<form>
<div class="column">
<div class="form-group">
<input type="text" class="form-control" placeholder="Ваш телефон" name="phone" data-mask="+38 (099) 999-99-99" required/>
</div>
</div>
<div class="column">
<div class="form-controls">
<button type="button" class="btn btn-red btn-large btn-block btn-submit" required disabled="disabled">Заказать звонок</button>
</div>
</div>
</form>
JavaScript
$(function() {
var codes = {
'063': 'Life',
'065': 'MTS',
'044': 'Gorodskoy'
}
var inputs = $('[data-mask]');
inputs.filter(':not(.ready)').each(function() {
var inp = $(this);
var mask = inp.attr('data-mask');
inp.mask(mask, {
placeholder: "_"
}).addClass('ready');
});
$(document)
.delegate('.js-numeric', 'keypress', function(e) {
var key = e.which;
if (key != 8 && key != 0 && (key < 48 || key > 57)) return false;
})
.delegate('[required]', 'keyup change', function(e) {
var group = $(this).parents('.form-group');
group.find('.error-block').slideUp('fast', function() {
group.removeClass('error');
});
required();
})
.delegate('[data-mask]', 'blur', function() {
required();
})
// check required fields
var required = function() {
$('form').each(function() {
var form = $(this);
var enable = true;
valid = false;
form
.find('[required]')
.filter('input[type="hidden"], input[type="text"], input[type="password"], input[type="email"], textarea, select')
.each(function() {
if (!$(this).val() || $(this).val().replace(/\D/g, '').length < 12) enable = false;
if (codes[$(this).val().substr(5, 3)]) valid = true;
if (codes[$(this).val().substr(5, 3)]) {
obj = {
date: '',
time: '',
phone: ''
};
alert(obj[0]);
}
}).end().end()
.find('button,input[type="button"]').filter('[required]').attr('disabled', (valid &&...