From 1f59478e0ee9b730f6032d6f9c580b1e868e17cd Mon Sep 17 00:00:00 2001 From: Gogi Date: Tue, 18 May 2021 17:20:42 +0300 Subject: [PATCH 1/3] adding validation --- Form Validation/index.html | 39 +++++++++++++++++++++++++++++++ Form Validation/index.js | 48 ++++++++++++++++++++++++++++++++++++++ Form Validation/styles.css | 7 ++++++ 3 files changed, 94 insertions(+) create mode 100644 Form Validation/index.html create mode 100644 Form Validation/index.js create mode 100644 Form Validation/styles.css diff --git a/Form Validation/index.html b/Form Validation/index.html new file mode 100644 index 0000000..5119165 --- /dev/null +++ b/Form Validation/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + Form Validation + + +
+

Form Validation

+

Add your detail below!

+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ +

+ + + + diff --git a/Form Validation/index.js b/Form Validation/index.js new file mode 100644 index 0000000..7d16073 --- /dev/null +++ b/Form Validation/index.js @@ -0,0 +1,48 @@ +"use strict"; + +const form = document.querySelector("#form"); +const fname = document.querySelector("#name"); +const surname = document.querySelector("#surname"); +const email = document.querySelector("#email"); +const validationField = document.querySelector("#validation-message"); +const btn = document.querySelector("#btn"); + +fname.addEventListener("input", (e) => { + e.preventDefault(); + displayMessage(); +}); + +// || +// !surname.checkValidity() || +// !email.checkValidity() + +function displayMessage() { + let txt = ""; + if (!fname.validity.rangeUnderflow) { + console.log("too small"); + txt = fname.validationMessage; + // validationField.innerHTML = "Value too small"; + } else { + console.log("big enough"); + txt = fname.validationMessage; + } + validationField.innerHTML = txt; +} + +// function myFunction() { +// var inpObj = document.getElementById("id1"); +// if (!inpObj.checkValidity()) { +// document.getElementById("demo").innerHTML = inpObj.validationMessage; +// } else { +// document.getElementById("demo").innerHTML = "Input OK"; +// } +// } + +// Think about how you would set up the different form elements and their accompanying validators. +//TODO What objects and functions will you need? +// A few minutes of thought can save you from wasting an hour of coding. +// The best thing you can do is whiteboard the entire solution before even touching the computer. + +//TODO Add the JavaScript code that checks validation as the user progresses through the form. When a user leaves a form field it should automatically validate that field. + +//TODO Test out all possible cases. diff --git a/Form Validation/styles.css b/Form Validation/styles.css new file mode 100644 index 0000000..4381e0e --- /dev/null +++ b/Form Validation/styles.css @@ -0,0 +1,7 @@ +input:invalid { + border: 2px dashed red; +} +input:focus { + /* background-image: linear-gradient(hotpink, lightgreen); */ + background-color: yellow; +} From 721b6308c444d232e492c2ada9f25cbee745bd86 Mon Sep 17 00:00:00 2001 From: Gogi Date: Wed, 19 May 2021 01:14:03 +0300 Subject: [PATCH 2/3] trying to use pure functions --- Form Validation/index.html | 18 ++++++------ Form Validation/index.js | 60 +++++++++++++++++++++----------------- Form Validation/styles.css | 23 +++++++++++---- 3 files changed, 61 insertions(+), 40 deletions(-) diff --git a/Form Validation/index.html b/Form Validation/index.html index 5119165..8fa2b9a 100644 --- a/Form Validation/index.html +++ b/Form Validation/index.html @@ -3,21 +3,21 @@ - - - + + Form Validation - -
+ +

Form Validation

-

Add your detail below!

-
+

Add your detail below!

+ +
- +
@@ -25,7 +25,7 @@

Add your detail below!

- +
diff --git a/Form Validation/index.js b/Form Validation/index.js index 7d16073..e8bca6d 100644 --- a/Form Validation/index.js +++ b/Form Validation/index.js @@ -1,43 +1,51 @@ "use strict"; const form = document.querySelector("#form"); -const fname = document.querySelector("#name"); +const fname = document.querySelector("#fname"); const surname = document.querySelector("#surname"); const email = document.querySelector("#email"); -const validationField = document.querySelector("#validation-message"); +// const nameValidationText = document.querySelector("#name-validation-message"); +// const surnameValidationText = document.querySelector("#surname-validation-message"); +// const emailValidationText = document.querySelector("#email-validation-message"); const btn = document.querySelector("#btn"); -fname.addEventListener("input", (e) => { +form.addEventListener("input", (e) => { e.preventDefault(); - displayMessage(); + const validationText = document.querySelector("#validation-message"); + const inputValue = e.target.id; + console.log(inputValue); + // console.log(e.target.placeholder); + console.log(e.target.id); + // displayMessage(e.target.id, validationText); + console.log(inputValue.checkValidity()); }); -// || -// !surname.checkValidity() || -// !email.checkValidity() - -function displayMessage() { +function displayMessage(input, validationText) { let txt = ""; - if (!fname.validity.rangeUnderflow) { - console.log("too small"); - txt = fname.validationMessage; - // validationField.innerHTML = "Value too small"; - } else { - console.log("big enough"); - txt = fname.validationMessage; + if (!input.checkValidity()) { + txt = input.validationMessage; + validationText.innerHTML = `${input}: ${txt}`; + validationText.classList.add("validation-text-wrong"); } - validationField.innerHTML = txt; + // if (!fname.checkValidity()) { + // txt = fname.validationMessage; + // nameValidationText.innerHTML = `Name: ${txt}`; + // nameValidationText.classList.add("validation-text-wrong"); + // } + + // if (!surname.checkValidity()) { + // txt = surname.validationMessage; + // surnameValidationText.innerHTML = `Surname: ${txt}`; + // surnnameValidationText.classList.add("validation-text-wrong"); + // } + + // if (!email.checkValidity()) { + // txt = email.validationMessage; + // emailValidationText.innerHTML = `Email: ${txt}`; + // emailValidationText.classList.add("validation-text-wrong"); + // } } -// function myFunction() { -// var inpObj = document.getElementById("id1"); -// if (!inpObj.checkValidity()) { -// document.getElementById("demo").innerHTML = inpObj.validationMessage; -// } else { -// document.getElementById("demo").innerHTML = "Input OK"; -// } -// } - // Think about how you would set up the different form elements and their accompanying validators. //TODO What objects and functions will you need? // A few minutes of thought can save you from wasting an hour of coding. diff --git a/Form Validation/styles.css b/Form Validation/styles.css index 4381e0e..16099fb 100644 --- a/Form Validation/styles.css +++ b/Form Validation/styles.css @@ -1,7 +1,20 @@ -input:invalid { - border: 2px dashed red; -} -input:focus { +/* input:invalid { */ + /* border: 2px dashed red; */ +/* } */ +/* input:focus { /* background-image: linear-gradient(hotpink, lightgreen); */ - background-color: yellow; + /* background-color: yellow; */ +/* } */ + +input:valid:required { + background-color: green; + color: white; +} + +.validation-text-wrong{ + color: tomato; } + +.validation-text-ok { + color: darkgreen; +} \ No newline at end of file From 3ac18777c8c018c48b8c61098a396120e41c0a68 Mon Sep 17 00:00:00 2001 From: Gogi Date: Wed, 19 May 2021 01:54:04 +0300 Subject: [PATCH 3/3] completed Form Validation --- Form Validation/index.html | 2 +- Form Validation/index.js | 59 ++++++++++++-------------------------- Form Validation/styles.css | 23 ++++++--------- 3 files changed, 27 insertions(+), 57 deletions(-) diff --git a/Form Validation/index.html b/Form Validation/index.html index 8fa2b9a..b0178c9 100644 --- a/Form Validation/index.html +++ b/Form Validation/index.html @@ -21,7 +21,7 @@

Add your detail below!

- +
diff --git a/Form Validation/index.js b/Form Validation/index.js index e8bca6d..37ee3ac 100644 --- a/Form Validation/index.js +++ b/Form Validation/index.js @@ -4,53 +4,30 @@ const form = document.querySelector("#form"); const fname = document.querySelector("#fname"); const surname = document.querySelector("#surname"); const email = document.querySelector("#email"); -// const nameValidationText = document.querySelector("#name-validation-message"); -// const surnameValidationText = document.querySelector("#surname-validation-message"); -// const emailValidationText = document.querySelector("#email-validation-message"); +const validationText = document.querySelector("#validation-message"); const btn = document.querySelector("#btn"); form.addEventListener("input", (e) => { e.preventDefault(); - const validationText = document.querySelector("#validation-message"); - const inputValue = e.target.id; - console.log(inputValue); - // console.log(e.target.placeholder); - console.log(e.target.id); - // displayMessage(e.target.id, validationText); - console.log(inputValue.checkValidity()); -}); - -function displayMessage(input, validationText) { let txt = ""; - if (!input.checkValidity()) { - txt = input.validationMessage; - validationText.innerHTML = `${input}: ${txt}`; - validationText.classList.add("validation-text-wrong"); - } - // if (!fname.checkValidity()) { - // txt = fname.validationMessage; - // nameValidationText.innerHTML = `Name: ${txt}`; - // nameValidationText.classList.add("validation-text-wrong"); - // } + validationText.innerHTML = ""; - // if (!surname.checkValidity()) { - // txt = surname.validationMessage; - // surnameValidationText.innerHTML = `Surname: ${txt}`; - // surnnameValidationText.classList.add("validation-text-wrong"); - // } - - // if (!email.checkValidity()) { - // txt = email.validationMessage; - // emailValidationText.innerHTML = `Email: ${txt}`; - // emailValidationText.classList.add("validation-text-wrong"); - // } -} + if (form.checkValidity()) { + validationText.innerHTML = "Looks Good!"; + } -// Think about how you would set up the different form elements and their accompanying validators. -//TODO What objects and functions will you need? -// A few minutes of thought can save you from wasting an hour of coding. -// The best thing you can do is whiteboard the entire solution before even touching the computer. + if (e.target.id === "fname" && !fname.checkValidity()) { + txt = fname.validationMessage; + validationText.innerHTML = `Name: ${txt}`; + } -//TODO Add the JavaScript code that checks validation as the user progresses through the form. When a user leaves a form field it should automatically validate that field. + if (e.target.id === "surname" && !surname.checkValidity()) { + txt = surname.validationMessage; + validationText.innerHTML = `Surname: ${txt}`; + } -//TODO Test out all possible cases. + if (e.target.id === "email" && !email.checkValidity()) { + txt = email.validationMessage; + validationText.innerHTML = `Email: ${txt}`; + } +}); \ No newline at end of file diff --git a/Form Validation/styles.css b/Form Validation/styles.css index 16099fb..a98b7aa 100644 --- a/Form Validation/styles.css +++ b/Form Validation/styles.css @@ -1,20 +1,13 @@ -/* input:invalid { */ - /* border: 2px dashed red; */ -/* } */ -/* input:focus { - /* background-image: linear-gradient(hotpink, lightgreen); */ - /* background-color: yellow; */ -/* } */ +input { + margin: .5em 0; + padding: 0.5em; + font-size: 1rem; +} input:valid:required { - background-color: green; - color: white; + background-color: lightgreen; } -.validation-text-wrong{ - color: tomato; +input:invalid { + box-shadow: 0 0 5px 1px red; } - -.validation-text-ok { - color: darkgreen; -} \ No newline at end of file