API tools faq
paste
Advertisement
Guest User

lolkekglavopora

a guest
Jun 19th, 2019
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.28 KB | None | 0 0
raw download clone embed print report
  1. body {
  2. background-color: white;
  3. }
  4.  
  5. .modal__window {
  6. background-color: white;
  7. position: fixed;
  8. width: 380px;
  9. margin: auto;
  10. left: 0;
  11. right: 0;
  12. top: 20%;
  13. font-family: "Rubik", sans-serif;
  14. box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  15. }
  16. .modal__window .modal__window__label {
  17. height: 60px;
  18. text-align: center;
  19. padding-top: 25px;
  20. background-color: blue;
  21. color: white;
  22. font-weight: 700;
  23. font-size: 23px;
  24. text-transform: uppercase;
  25. position: relative;
  26. }
  27. .modal__window__form {
  28. margin-top: 35px;
  29. }
  30. .modal__window .modal__window__form .modal__window__form__object {
  31. height: 65px;
  32. font-size: 15px;
  33. margin: 8px auto;
  34. display: flex;
  35. flex-flow: column;
  36. width: 80%;
  37. }
  38.  
  39. .modal__window .modal__window__form .modal__window__form__object input {
  40. height: 45px;
  41. padding-left: 10px;
  42. font-size: 17px;
  43. border: 1px solid #cccccc;
  44. outline: none;
  45. border-radius: 5px;
  46. }
  47.  
  48. .modal__window .modal__window__form .modal__window__form__button {
  49. margin: 25px auto 35px;
  50. right: 0;
  51. left: 0;
  52. text-align: center;
  53. }
  54. .modal__window .modal__window__form .modal__window__form__button button {
  55. font-size: 20px;
  56. outline: none;
  57. border: 1px solid;
  58. padding: 10px 25px;
  59. border-radius: 5px;
  60. font-weight: 700;
  61. text-transform: uppercase;
  62. }
  63. .modal__window
  64. .modal__window__form
  65. .modal__window__form__object
  66. .modal__form__error {
  67. height: 15px;
  68. font-size: 13px;
  69. color: red;
  70. text-align: left;
  71. display: none;
  72. }
  73.  
  74. .modal__success {
  75. display: fixed;
  76. left: 0;
  77. right: 0;
  78. margin: auto;
  79. padding: 15px 25px;
  80. background-color: white;
  81. width: 200px;
  82. border: 1px solid blue;
  83. box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
  84. }
  85.  
  86. let error = false;
  87.  
  88. const regNumber = /^((\+7|7|8)+([0-9]){10})$/gm;
  89. const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  90. const errorMessage = document.getElementsByClassName("modal__form__error");
  91.  
  92. function send(event) {
  93. event.preventDefault();
  94. let firstNumberError = false;
  95. let firstEmailError = false;
  96. const email = document.getElementsByClassName("modal__email");
  97. const number = document.getElementsByClassName("modal__number");
  98.  
  99. if (number[0].value === "") {
  100. errorMessage[0].style.display = "block";
  101. number[0].style.border = "1px solid red";
  102. error = true;
  103. firstNumberError = true;
  104. }
  105. if (email[0].value === "") {
  106. errorMessage[2].style.display = "block";
  107. email[0].style.border = "1px solid red";
  108. error = true;
  109. }
  110. if (number[0].value.match(regNumber) === null && !firstNumberError) {
  111. errorMessage[1].style.display = "block";
  112. number[0].style.border = "1px solid red";
  113. error = true;
  114. }
  115. if (email[0].value.match(regEmail) === null && !firstEmailError) {
  116. errorMessage[3].style.display = "block";
  117. email[0].style.border = "1px solid red";
  118. error = true;
  119. }
  120. if (!error) {
  121. console.log("123");
  122. }
  123. }
  124.  
  125. document.getElementById("modal__form").addEventListener("submit", send);
  126.  
  127. const onChangeNumber = document.getElementById("modal__form__error__number");
  128.  
  129. onChangeNumber.addEventListener("input", event => {
  130. errorMessage[1].style.display = "none";
  131. if (onChangeNumber.value !== "") {
  132. errorMessage[0].style.display = "none";
  133. onChangeNumber.style.border = "1px solid #cccccc";
  134. error = false;
  135. }
  136. });
  137.  
  138. const onChangeEmail = document.getElementById("modal__form__error__email");
  139.  
  140. onChangeEmail.addEventListener("input", event => {
  141. errorMessage[3].style.display = "none";
  142. if (onChangeEmail.value !== "") {
  143. errorMessage[2].style.display = "none";
  144. onChangeEmail.style.border = "1px solid #cccccc";
  145. error = false;
  146. }
  147. });
  148.  
  149. <!DOCTYPE html>
  150. <html>
  151. <head>
  152. <title>Parcel Sandbox</title>
  153. <meta charset="UTF-8" />
  154.  
  155. <link
  156. href="https://fonts.googleapis.com/css?family=Rubik&display=swap"
  157. rel="stylesheet"
  158. />
  159. <link rel="stylesheet" href="./style.css" />
  160. <script
  161. src="https://code.jquery.com/jquery-3.4.1.js"
  162. integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  163. crossorigin="anonymous"
  164. ></script>
  165. <script src="index.js"></script>
  166. </head>
  167.  
  168. <body>
  169. <div class="modal__window">
  170. <div class="modal__window__label">
  171. <span>Оставьте вашу заявку</span>
  172. </div>
  173. <div class="modal__window__form">
  174. <form action=" " id="modal__form">
  175. <div class="modal__window__form__object">
  176. <input
  177. type="text"
  178. id="name"
  179. name="user_name"
  180. placeholder="Введите ваше имя"
  181. />
  182. </div>
  183. <div class="modal__window__form__object">
  184. <input
  185. class="modal__number"
  186. type="text"
  187. id="modal__form__error__number"
  188. name="user_number"
  189. placeholder="Введите ваш телефон"
  190. />
  191. <div class="modal__form__error">
  192. <span>Поле обязательно для заполнениия</span>
  193. </div>
  194. <div class="modal__form__error">
  195. <span>Номер неверен</span>
  196. </div>
  197. </div>
  198. <div class="modal__window__form__object">
  199. <input
  200. class="modal__email"
  201. type="text"
  202. id="modal__form__error__email"
  203. name="user_mail"
  204. placeholder="Введите ваш email"
  205. />
  206. <div class="modal__form__error">
  207. <span>Поле обязательно для заполнениия</span>
  208. </div>
  209. <div class="modal__form__error">
  210. <span>Email неверен</span>
  211. </div>
  212. </div>
  213.  
  214. <div class="modal__window__form__button">
  215. <button type="submit">
  216. Отправить заявку
  217. </button>
  218. </div>
  219. </form>
  220. </div>
  221. </div>
  222. <div class="modal__success">
  223. <div class="modal_success__container">
  224. <span>ВАША ЗАЯВКА ПРИНЯТА</span>
  225. </div>
  226. </div>
  227. </body>
  228. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!