Помогите с телефонной формой [закрыт]

body { 
  margin: 0; 
  padding: 0; 
  min-height: 100vh; 
  background-color: green; 
  position: ralative; 
} 
 
.center { 
  padding: 1rem; 
  background-color: white; 
  border-radius: 10px; 
  width: auto; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.center>p { 
  display: flex; 
}

<form class="center" onSubmit="alert('Ok')"> 
  <p> 
    <input type="tel" pattern="^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$" required /> 
    <input type="submit" id="submit" /> 
  </p> 
  <p> 
    <input type="checkbox" /> 
  </p> 
</form>

/* 
 jQuery Masked Input Plugin 
 Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) 
 Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) 
 Version: 1.4.1 
 */ 
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];);return a}function r(a){for(;--a>=0&&!j[a];);return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++)if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++)if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}}function u(){var a=B.val(),b=B.caret();if(o&&o.length&&o.length>a.length){for(A(!0);b.begin>0&&!j[b.begin-1];)b.begin--;if(0===b.begin)for(;b.begin<l&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}else{for(A(!0);b.begin<n&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}h()}function v(){A(),B.val()!=E&&B.change()}function w(a){if(!B.prop("readonly")){var b,c,e,f=a.which||a.keyCode;o=B.val(),8===f||46===f||d&&127===f?(b=B.caret(),c=b.begin,e=b.end,e-c===0&&(c=46!==f?r(c):e=q(c-1),e=46===f?q(e):e),y(c,e),s(c,e-1),a.preventDefault()):13===f?v.call(this,a):27===f&&(B.val(E),B.caret(0,A()),a.preventDefault())}}function x(b){if(!B.prop("readonly")){var c,d,e,g=b.which||b.keyCode,i=B.caret();if(!(b.ctrlKey||b.altKey||b.metaKey||32>g)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++)j[c]&&(C[c]=p(c))}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++)if(j[b]){for(C[b]=p(b);d++<e.length;)if(c=e.charAt(d-1),j[b].test(c)){C[b]=c,f=b;break}if(d>e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){B.get(0)===document.activeElement&&(z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a))},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})}); 
(function( $ ){ 
	 
  var $body; 
 
  $(document).ready(function(){ 
    $body = $('body'); 
 
    $body 
      .find('.user-phone').each(function(){ 
          $(this).mask("+7 (999) 999-99-99",{autoclear: false}); 
      }); 
 
    $body.on('keyup','.user-phone',function(){ 
      var phone = $(this), 
          phoneVal = phone.val(), 
          form = $(this).parents('form'); 
 
      if ( (phoneVal.indexOf("_") != -1) || phoneVal == '' ) { 
        form.find('.btn_submit').attr('disabled',true); 
      } else { 
        form.find('.btn_submit').removeAttr('disabled'); 
      } 
 
       
    }); 
 
  }); 
 
})( jQuery );

/* = Общие стили 
************************/ 
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} } 
a {text-decoration: none;} 
 
/* =Стили для header'а 
************************/ 
html{  
 
} 
body{ 
	 
 background: linear-gradient(to right, #5cea98, #d0a4e3); 
  
  } 
 
 
/* Main	*/ 
 
.phone_form { 
	width: 520px; 
	margin: 300px auto; 
	 
} 
.user-phone { 
	width: 400px; 
	position: relative; 
	/*padding: 8px 8px 8px 36px;*/ 
	padding: 5px 5px 5px 5px; 
	height: 20px; 
	border: 1px solid #ccc; 
	border-radius: 16px 16px; 
	font-size: 33px; 
	color: #363636; 
	font-weight: bold; 
	font-size: 30px; 
} 
 
} 
input.user-phone:-moz-placeholder { 
	color: #363636; 
 
 
} 
input.user-phone::-webkit-input-placeholder { 
	color: #363636; 
 
} 
.btn_submit { 
	height: 92px; 
	position: relative; 
	bottom: 92px; 
	left: 275px; 
	background: #363636; 
	color: #fff; 
	border: none; 
	width: 200px; 
	cursor: pointer; 
	transition: all 0.5s; 
	-webkit-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	border-radius: 0 16px 16px 0; 
	font-size: 35px; 
 
 
} 
.btn_submit[disabled] { 
	color: #363636; 
	background: #ccc; 
} 
 
 
 
 
[id^=c]{ 
    display: none; 
} 
[id^=c] + label{ 
    display: block; 
    width: 30px; 
    height: 30px; 
    border: 4px solid #FFF; 
    border-radius: 6px; 
    text-align: center;    
    position: relative; 
    background-color: #FFF; 
     
} 
[id^=c] + label:before{ 
    content: '';     
    position: absolute; top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background: black; 
    -webkit-clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); 
clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); 
    -webkit-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: transform .3s; 
    transition: transform .3s; 
} 
[id^=c]:checked + label:before{     
    -webkit-transform: scale(1); 
    transform: scale(1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="https://jquery.maskedinput.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!doctype html> 
<!--[if IE 7 ]><html class="ie7"> <![endif]--> 
<!--[if IE 8 ]><html class="ie8"> <![endif]--> 
<!--[if IE 9 ]><html class="ie9"> <![endif]--> 
<!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]--> 
<head> 
 
	<meta charset="utf-8" /> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
 
	<title>Отправка номера</title> 
	 
	<link type="text/css" rel="stylesheet" href="style.css" media="all" /> 
	 
</head> 
 
 
 
 
     
         
           
</header> 
<body> 
 
 
 
	 
<form action="#" method="post" class="phone_form"> 
	 
	<div class="user_phone"> 
  		<input style="height: 80px;" type="tel" required placeholder="+7" id="user_phone" class="user-phone" title="Формат: +7 (xxx) xxx xx xx"/> 
	</div> 
	 
	<input type="submit" class="btn_submit" disabled /> 
	<input type="checkbox" name="c1" id="c1" /> 
<label for="c1"></label> 
	 
</form> 
 
</div> 
 
</section> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.maskedinput.min.js"></script> 
<script src="script.js"></script> 
 
</body> 
</html>

/* 
 jQuery Masked Input Plugin 
 Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) 
 Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) 
 Version: 1.4.1 
 */ 
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];);return a}function r(a){for(;--a>=0&&!j[a];);return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++)if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++)if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}}function u(){var a=B.val(),b=B.caret();if(o&&o.length&&o.length>a.length){for(A(!0);b.begin>0&&!j[b.begin-1];)b.begin--;if(0===b.begin)for(;b.begin<l&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}else{for(A(!0);b.begin<n&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}h()}function v(){A(),B.val()!=E&&B.change()}function w(a){if(!B.prop("readonly")){var b,c,e,f=a.which||a.keyCode;o=B.val(),8===f||46===f||d&&127===f?(b=B.caret(),c=b.begin,e=b.end,e-c===0&&(c=46!==f?r(c):e=q(c-1),e=46===f?q(e):e),y(c,e),s(c,e-1),a.preventDefault()):13===f?v.call(this,a):27===f&&(B.val(E),B.caret(0,A()),a.preventDefault())}}function x(b){if(!B.prop("readonly")){var c,d,e,g=b.which||b.keyCode,i=B.caret();if(!(b.ctrlKey||b.altKey||b.metaKey||32>g)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++)j[c]&&(C[c]=p(c))}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++)if(j[b]){for(C[b]=p(b);d++<e.length;)if(c=e.charAt(d-1),j[b].test(c)){C[b]=c,f=b;break}if(d>e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){B.get(0)===document.activeElement&&(z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a))},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})}); 
(function( $ ){ 
	 
  var $body; 
 
  $(document).ready(function(){ 
    $body = $('body'); 
 
    $body 
      .find('.user-phone').each(function(){ 
          $(this).mask("+7 (999) 999-99-99",{autoclear: false}); 
      }); 
 
    /*Решил сделать по своему, закомментировал стандартное отключение кнопки, при желании код ниже можно просто удалить*/ 
    $body.on('keyup','.user-phone',function(){ 
      var phone = $(this), 
          phoneVal = phone.val(), 
          form = $(this).parents('form'); 
 
      if ( (phoneVal.indexOf("_") != -1) || phoneVal == '' ) { 
        /* form.find('.btn_submit').attr('disabled',true) */; 
      } else { 
        /* form.find('.btn_submit').removeAttr('disabled') */; 
      } 
 
       
    }); 
    /*До сюда*/ 
     
    $('#user_phone').keyup(function(){//Отслеживаем нажатие клавиш 
      var val = $(this).val().replace(/\D+/g,"");//Оставляем только цифры 
      if(val.length >= 11) {//Проверяем на кол-во цифр 
        if($('#c1').is(":checked")) {//Проверяем нажат ли чекбокс 
          $('.btn_submit').removeAttr('disabled');//Если нажат активируем кнопку 
        } else { 
          $('.btn_submit').attr('disabled',true);//Если не нажат выключаем кнопку 
        } 
      } else { 
        $('.btn_submit').attr('disabled',true);//Если цифр меньше 11 выключаем чек бокс 
      } 
    }); 
    $('#c1').change(function(){//Отслеживаем нажатие на чекбокс 
      if($(this).is(":checked")) {//Если чекбокс нажат 
        var val = $('#user_phone').val().replace(/\D+/g,"");//Достаем все из инпута и оставляем только цифры 
        if(val.length >= 11) {//Проверяем на кол-во цифр 
          $('.btn_submit').removeAttr('disabled');//Если цифр больше 11 активируем кнопку 
        } else { 
          $('.btn_submit').attr('disabled',true);//Если меньше 11 выключаем кнопку 
        } 
      } else { 
        $('.btn_submit').attr('disabled',true);//Если чек бокс не нажат выключаем кнопку 
      } 
    }); 
 
  }); 
 
})( jQuery );

/* = Общие стили 
************************/ 
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} } 
a {text-decoration: none;} 
 
/* =Стили для header'а 
************************/ 
html{  
 
} 
body{ 
	 
 background: linear-gradient(to right, #5cea98, #d0a4e3); 
  
  } 
 
 
/* Main	*/ 
 
.phone_form { 
	width: 520px; 
	margin: 300px auto; 
	 
} 
.user-phone { 
	width: 400px; 
	position: relative; 
	/*padding: 8px 8px 8px 36px;*/ 
	padding: 5px 5px 5px 5px; 
	height: 20px; 
	border: 1px solid #ccc; 
	border-radius: 16px 16px; 
	font-size: 33px; 
	color: #363636; 
	font-weight: bold; 
	font-size: 30px; 
} 
 
} 
input.user-phone:-moz-placeholder { 
	color: #363636; 
 
 
} 
input.user-phone::-webkit-input-placeholder { 
	color: #363636; 
 
} 
.btn_submit { 
	height: 92px; 
	position: relative; 
	bottom: 92px; 
	left: 275px; 
	background: #363636; 
	color: #fff; 
	border: none; 
	width: 200px; 
	cursor: pointer; 
	transition: all 0.5s; 
	-webkit-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	border-radius: 0 16px 16px 0; 
	font-size: 35px; 
 
 
} 
.btn_submit[disabled] { 
	color: #363636; 
	background: #ccc; 
} 
 
 
 
 
[id^=c]{ 
    display: none; 
} 
[id^=c] + label{ 
    display: block; 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    top: 400px; 
    border: 4px solid #FFF; 
    border-radius: 6px; 
    text-align: center;    
    /* position: relative; */ 
    background-color: #FFF; 
     
} 
[id^=c] + label:before{ 
    content: '';     
    position: absolute; top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    background: black; 
    -webkit-clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); 
clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%); 
    -webkit-transform: scale(0); 
    transform: scale(0); 
    -webkit-transition: transform .3s; 
    transition: transform .3s; 
} 
[id^=c]:checked + label:before{     
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 
/*При наведении на чекбокс добавляем обводку*/ 
[id^=c] + label:hover { 
  border: 4px solid #000; 
} 
/*При выборе чекбокса ставим обводку*/ 
[id^=c]:checked + label { 
    border: 4px solid #000; 
} 
/*Текст рядом с чекбоксом*/ 
.text-for-checkbox { 
  position: absolute; 
  left: 34%; 
  margin-top: 17px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="https://jquery.maskedinput.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<!doctype html> 
<!--[if IE 7 ]><html class="ie7"> <![endif]--> 
<!--[if IE 8 ]><html class="ie8"> <![endif]--> 
<!--[if IE 9 ]><html class="ie9"> <![endif]--> 
<!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]--> 
<head> 
 
	<meta charset="utf-8" /> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
 
	<title>Отправка номера</title> 
	 
	<link type="text/css" rel="stylesheet" href="style.css" media="all" /> 
	 
</head> 
 
 
 
 
     
         
           
</header> 
<body> 
 
 
 
	 
<form action="#" method="post" class="phone_form"> 
	 
	<div class="user_phone"> 
  		<input style="height: 80px;" type="tel" required placeholder="+7" id="user_phone" class="user-phone" title="Формат: +7 (xxx) xxx xx xx"/> 
	</div> 
	 
	<input type="submit" class="btn_submit" disabled /> 
	<input type="checkbox" name="c1" id="c1" /> 
<label for="c1"></label><span class="text-for-checkbox">Text</span> 
	 
</form> 
 
</div> 
 
</section> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.maskedinput.min.js"></script> 
<script src="script.js"></script> 
 
</body> 
</html>