diff --git a/hw4/hw4-3/code.js b/hw4/hw4-3/code.js new file mode 100644 index 0000000..ec059fc --- /dev/null +++ b/hw4/hw4-3/code.js @@ -0,0 +1,160 @@ +'use strict'; + +class Form { + constructor(name, className, type) { + this.name = name; + this.className = className; + this.type = type; + } + + render() { + return ``; + } +} + +class FormItems { + constructor() { + this.elements = []; + this.requirements = []; + } + + fetchElements() { + this.elements = [ + { name: 'Имя', className: 'name', type: 'text' }, + { name: 'Номер телефона', className: 'phone', type: 'tel' }, + { name: 'E-mail', className: 'mail', type: 'e-mail' } + ] + } + + addTextArea() { + let textArea = document.createElement('textarea'); + let textLabel = document.createElement('label'); + textLabel.className = 'textLabel'; + textLabel.innerText = 'Ваш текст'; + textArea.className = 'text'; + textArea.name = 'text'; + document.getElementById('fields').append(textLabel, textArea); + } + + renderElements() { + let formHTML = ''; + this.elements.forEach(elem => { + const item = new Form(elem.name, elem.className, elem.type); + formHTML += item.render(); + }); + document.getElementById('fields').innerHTML = formHTML; + } + + addEventlistener() { + let form = document.getElementById('myForm').addEventListener('submit', (event) => this.submitForm(event)); + } + + submitForm(event) { + event.preventDefault(); + + let name = document.querySelector('.name'); + let phone = document.querySelector('.phone'); + let mail = document.querySelector('.mail'); + let li = document.querySelectorAll('.error'); + + if (this.validateName(name.value) && this.validatePhoneNumber(phone.value) && this.validateMail(mail.value)) { + alert('Ваш запрос отвправлен!'); + if (li !== []) { + li.forEach(elem => { + elem.remove(); + }) + } + } else { + if (!this.validateName(name.value)) { + let err = document.createElement('li'); + err.className = 'error'; + err.innerText = 'Введеное Вами имя не соответствует требованиям.'; + document.querySelector('.errors').appendChild(err); + } + if (!this.validatePhoneNumber(phone.value)) { + let err = document.createElement('li'); + err.className = 'error'; + err.innerText = 'Номер Вашего телефона не совпадает с требуемыми критериями.'; + document.querySelector('.errors').appendChild(err); + } + if (!this.validateMail(mail.value)) { + let err = document.createElement('li'); + err.className = 'error'; + err.innerText = 'Не правильно введен адрес электронной почты.'; + document.querySelector('.errors').appendChild(err); + } + if (li !== []) { + li.forEach(elem => { + elem.remove(); + }) + } + } + } + + validateForm() { + let inputs = document.querySelectorAll('input'); + inputs.forEach(elem => { + if (elem.name === 'name') { + elem.onblur = () => { + this.validateName(elem.value); + } + }; + if (elem.name === 'phone') { + elem.onblur = () => { + this.validatePhoneNumber(elem.value); + } + }; + if (elem.name === 'mail') { + elem.onblur = () => { + this.validateMail(elem.value); + } + }; + }) + } + + validateName(name) { + let regexp = /[a-zA-ZА-яа-я]/; + let input = document.querySelector('.name'); + if (regexp.test(name)) { + input.style.border = '.5px solid green'; + input.style.background = '#76B276'; + return { valid: true }; + } else { + input.style.border = '.5px solid red'; + input.style.background = '#FFA3A3'; + } + } + + validatePhoneNumber(phone) { + let input = document.querySelector('.phone'); + let regexp = /((\+7))?(\(?\d{3}\)?[\- ]?)?[\d\- ]{8}$/; + if (regexp.test(phone)) { + input.style.border = '.5px solid green'; + input.style.background = '#76B276'; + return { valid: true }; + } else { + input.style.border = '.5px solid red'; + input.style.background = '#FFA3A3'; + } + } + + validateMail(mail) { + let input = document.querySelector('.mail'); + let regexp = /^([^\W])([a-z0-9_\.-]+)@([a-z0-9_\.-]+)\.([a-z\.]{2,6})$/; + if (regexp.test(mail)) { + input.style.border = '.5px solid green'; + input.style.background = '#76B276'; + return { valid: true }; + } else { + input.style.border = '.5px solid red'; + input.style.background = '#FFA3A3'; + } + } +} + +let myForm = new FormItems(); +myForm.fetchElements(); +myForm.renderElements(); +myForm.addTextArea(); +myForm.validateForm(); +myForm.addEventlistener(); diff --git a/hw4/hw4-3/index.html b/hw4/hw4-3/index.html new file mode 100644 index 0000000..9df6caf --- /dev/null +++ b/hw4/hw4-3/index.html @@ -0,0 +1,32 @@ + + + +
+ + + + + +'She said that she would aren't dance with me if I brought her red roses,' cried the young Student; 'but in all + my garden there is no red rose.' From her nest in the holm-oak tree the Nightingale heard him, and she looked + out through the leaves, and wondered. 'No red rose in all my garden!' he cried, and his beautiful eyes filled + with tears. 'Ah, fon what little things does happiness depend! I have read all that the wise men have written, + and all the secrets of philosophy are mine, yet for want of a red rose is my life made wretched.' 'Here at last + is a true lover,' said the Nightingale. 'Night after night have I sung of him, though I knew him not: night + after night have I told his story to the stars, and now I see him. His hair is dark as the hyacinth-blossom, and + his lips are red as the rose of his desire; but passion has made his face like pale ivory, and sorrow has set + her seal upon his brow.' 'The Prince gives a ball to-morrow night,' murmured the young Student, 'and my love + will be of the company. If I bring her a red rose she will dance with me till dawn. If I bring her a red rose, I + shall hold her in my arms, and she will lean her head upon my shoulder, and her hand will be clasped in mine. + But there is no red rose in my garden, so I shall sit lonely, and she will pass me by. She will have no heed of + me, and my heart will break.' 'Here indeed is the true lover,' said the Nightingale. 'What I sing of, he suffers + - what is joy to me, to him is pain. Surely Love is a wonderful thing. It is more precious than emeralds, and + dearer than fine opals. Pearls and pomegranates cannot buy it, nor is it set forth in the marketplace. It may + not be purchased of the merchants, nor can it be weighed out in the balance for gold.' +
+ + + + + +