├── .gitignore ├── README.md ├── ajax.php ├── index.css ├── index.html ├── index.js ├── index.scss └── validation.js /.gitignore: -------------------------------------------------------------------------------- 1 | index.css.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # javascript-form-validation 2 | 3 | Videoda birlikte hazırladığımız validasyon işlemlerinin kaynak kodları. 4 | 5 | ## Kullanım 6 | 7 | Tek yapmanız gereken basit bir form oluşturmak 8 | 9 | ```html 10 |
11 | 22 |
23 | ``` 24 | Daha sonra birlikte hazırladığımız `validation.js` dosyasını sayfaya dahil etmek 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | Ve `form` etiketinizi seçerek işlemi gerçekleştirmeniz. 31 | 32 | ```javascript 33 | const form1 = document.getElementById('form1') 34 | form1.watchValidate(); // form öğelerini dinler 35 | form2.addEventListener('submit', function(e) { 36 | e.preventDefault() 37 | this.validate(); // form öğelerinin geçerliliğini kontrol eder 38 | this.sendIfIsValid(); // tüm form öğeleri başarılıysa `action` adresine post işlemi gönderir 39 | }) 40 | // post işlemi sonucunu döner 41 | form2.getResult(function(e){ 42 | console.log(e.currentTarget.response); // dönen değer 43 | }) 44 | ``` 45 | 46 | Daha fazl detayı `index.html` dosyasındaki örnekte bulabilirsiniz. -------------------------------------------------------------------------------- /ajax.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Form Örneği

14 | 68 |
69 | 70 |
71 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const form1 = document.getElementById('form1'); 2 | form1.watchValidate(); 3 | form1.addEventListener('submit', function(e) { 4 | e.preventDefault(); 5 | 6 | // tüm elemanları kontrol et 7 | this.validate(); 8 | 9 | // formu gönder 10 | this.sendIfIsValid(); 11 | 12 | // alternatif olarak kendiniz formu kontorl edip gönderebilirsiniz 13 | // if (this.checkValidity()) { 14 | // new FormData(form1) 15 | // } 16 | 17 | }); 18 | form1.getResult(function(e) { 19 | console.log(e.currentTarget.response); 20 | }); 21 | 22 | 23 | const form2 = document.getElementById('form2') 24 | form2.watchValidate() 25 | form2.addEventListener('submit', function(e) { 26 | e.preventDefault() 27 | this.validate() 28 | this.sendIfIsValid() 29 | }) 30 | form2.getResult(function(e){ 31 | console.log(e.currentTarget.response) 32 | }) -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | border: 0; 6 | box-sizing: border-box; 7 | outline: 0; 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 9 | } 10 | 11 | body { 12 | background: #000; 13 | color: #fff; 14 | } 15 | 16 | select, 17 | input:not([type="checkbox"]):not([type="radio"]) { 18 | width: 100%; 19 | height: 40px; 20 | border-bottom: 1px solid rgba(#fff,.3); 21 | background: transparent; 22 | color: #fff; 23 | font-size: 16px; 24 | &:focus { 25 | border-color: rgba(#fff,.6); 26 | } 27 | } 28 | 29 | select option { 30 | color: #111; 31 | } 32 | 33 | textarea { 34 | width: 100%; 35 | border-bottom: 1px solid rgba(#fff,.3); 36 | background: transparent; 37 | color: #fff; 38 | padding: 10px 0; 39 | font-size: 16px; 40 | &:focus { 41 | border-color: rgba(#fff,.6); 42 | } 43 | } 44 | 45 | button { 46 | width: 100%; 47 | height: 50px; 48 | border-radius: 4px; 49 | background: rebeccapurple; 50 | color: #fff; 51 | font-size: 16px; 52 | cursor: pointer; 53 | } 54 | 55 | .form { 56 | width: 80%; 57 | margin: 20px auto; 58 | border: 1px solid rgba(#fff,.3); 59 | padding: 25px; 60 | h3 { 61 | font-size: 30px; 62 | margin-bottom: 30px; 63 | font-weight: 600; 64 | } 65 | ul { 66 | li { 67 | &.error { 68 | input, textarea, select { 69 | border-bottom-color: orangered 70 | } 71 | } 72 | &:not(:last-child) { 73 | margin-bottom: 20px; 74 | } 75 | label { 76 | font-size: 14px; 77 | color: rgba(#fff,.8); 78 | display: block; 79 | margin-bottom: 10px; 80 | } 81 | .error-msg { 82 | font-size: 12px; 83 | padding-top: 10px; 84 | display: block; 85 | color: orangered 86 | } 87 | } 88 | } 89 | } -------------------------------------------------------------------------------- /validation.js: -------------------------------------------------------------------------------- 1 | HTMLElement.prototype.validate = function() { 2 | [...this.elements].forEach(formElement => formElement.isValidElement()) 3 | } 4 | 5 | HTMLElement.prototype.watchValidate = function() { 6 | [...this.elements].forEach(formElement => { 7 | ['change', 'keyup'].forEach(method => formElement.addEventListener(method, () => formElement.isValidElement())) 8 | }) 9 | } 10 | 11 | HTMLElement.prototype.isValidElement = function() { 12 | let parent = this 13 | if (this.getAttribute('type') === 'radio' || this.getAttribute('type') === 'checkbox') { 14 | parent = this.closest('.checkbox-container') || this.closest('.radio-container') 15 | } 16 | if (!this.checkValidity()) { 17 | 18 | this.closest('li').classList.add('error') 19 | 20 | if (parent.nextElementSibling?.className !== 'error-msg') { 21 | const error = document.createElement('small') 22 | error.className = 'error-msg' 23 | error.innerText = this.validationMessage 24 | parent.insertAdjacentElement('afterend', error) 25 | } else { 26 | parent.nextElementSibling.innerText = this.validationMessage 27 | } 28 | 29 | } else { 30 | this.closest('li').classList.remove('error') 31 | if (parent.nextElementSibling?.className === 'error-msg') { 32 | parent.nextElementSibling.remove() 33 | } 34 | } 35 | } 36 | 37 | HTMLElement.prototype.sendIfIsValid = function() { 38 | if (this.checkValidity()) { 39 | new FormData(this) 40 | } 41 | } 42 | 43 | HTMLElement.prototype.getResult = function(callback) { 44 | this.addEventListener('formdata', function(e) { 45 | const data = e.formData 46 | var request = new XMLHttpRequest(); 47 | request.open("POST", this.action); 48 | request.addEventListener('load', callback) 49 | request.send(data); 50 | }) 51 | } --------------------------------------------------------------------------------