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/>
<span class="error"></span>
</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>
<button class="mybutton" data-paste="1">1</button>
<button class="mybutton" data-paste="2">2</button>
<button class="mybutton" data-paste="3">3</button>
<button class="mybutton" data-paste="4">4</button>
<button class="mybutton" data-paste="5">5</button>
<button class="mybutton" data-paste="6">6</button>
<button class="mybutton" data-paste="7">7</button>
<button class="mybutton" data-paste="8">8</button>
<button class="mybutton" data-paste="9">9</button>
</div>
</div>
</form>
JavaScript
$(function() {
var codes = {
'063': 'Life',
'065': 'MTS',
'039': 'Golden Telecom',
'050 ': 'MTS',
'066 ': 'MTS',
'067 ': 'Киевстар',
'068 ': 'Beeline',
'091 ': 'Укртелеком',
'092 ': 'PEOPLEnet',
'094 ': 'Интертелеком',
'095 ': 'МТС',
'096 ': 'Киевстар',
'097 ': 'Киевстар',
'098 ': 'Киевстар',
'044': 'Gorodskoy_Kiev'
};
var retite = new Date();
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;
var valid = false;
form
.find('[required]')
.filter('input[type="hidden"], input[type="text"], input[type="password"], input[type="email"], textarea, select')
.each(function() {
var phone = this.value;
if (!phone || phone.replace(/\D/g, '').length < 12) enable = false;
if (codes[phone.substr(5, 3)]) valid = true;
if (!enable || !valid) {
...