Commit dd6e4a0

committed

Simple Form Validation 🫡🍾

1 parent 5c5188e commit dd6e4a0Copy full SHA for dd6e4a0

File tree

+95

-0

lines changed

+95

-0

lines changed

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+`
	`6`	`+ <meta charset="UTF-8">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>Hello World!</title>`
	`9`	`+ <link rel="stylesheet" href="./style.css" />`
	`10`	`+`
	`11`	`+</head>`
	`12`	`+`
	`13`	`+<body>`
	`14`	`+`
	`15`	`+ <form id="my-form" name="myForm" action="#">`
	`16`	`+`
	`17`	`+ <label for="nameInput">Name:</label>`
	`18`	`+ <input type="text" name="nameInput" /><br />`
	`19`	`+`
	`20`	`+ <label>Hobbies:</label><br />`
	`21`	`+ <input type="checkbox" name="biking" value="biking" />Biking<br />`
	`22`	`+ <input type="checkbox" name="skiing" value="skiing" />Skiing<br />`
	`23`	`+ <input type="checkbox" name="diving" value="diving" />Diving<br />`
	`24`	`+`
	`25`	`+ <label for="colorInput">Fav color:</label>`
	`26`	`+ <select name="colorInput">`
	`27`	`+ <option>Red</option>`
	`28`	`+ <option>Blue</option>`
	`29`	`+ <option>Green</option>`
	`30`	`+ </select>`
	`31`	`+`
	`32`	`+ <br /><br />`
	`33`	`+`
	`34`	`+ <input type="submit" name="submit" value="submit" />`
	`35`	`+`
	`36`	`+ <div id="message" style="color: red;"></div>`
	`37`	`+`
	`38`	`+ </form>`
	`39`	`+`
	`40`	`+`
	`41`	`+ <script src="./script.js"></script>`
	`42`	`+`
	`43`	`+</body>`
	`44`	`+`
	`45`	`+</html>`

Lines changed: 36 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,36 @@`
	`1`	`+document.write("<br /> <br/>" + "Simple Form Validation using JavaScript!" + "<br /><br />");`
	`2`	`+`
	`3`	`+// put the form to variable`
	`4`	`+let form = document.forms.myForm;`
	`5`	`+let message = document.getElementById("message");`
	`6`	`+`
	`7`	`+form.onsubmit = function() {`
	`8`	`+`
	`9`	`+ // Implementing form validation`
	`10`	`+ if(form.nameInput.value == "") {`
	`11`	`+`
	`12`	`+ message.innerHTML = "⚠️ Please Enter a Name!";`
	`13`	`+ return false; // Don't submitting the form`
	`14`	`+`
	`15`	`+ }`
	`16`	`+ // Check if at least one hobby is checked`
	`17`	`+ else if(!form.biking.checked && !form.skiing.checked && !form.diving.checked) {`
	`18`	`+`
	`19`	`+ message.innerHTML = "⚠️ At Least a Hobby Required!";`
	`20`	`+ return false;`
	`21`	`+`
	`22`	`+ }`
	`23`	`+ // Check if a color is selected`
	`24`	`+ else if(form.colorInput.value == "") {`
	`25`	`+`
	`26`	`+ message.innerHTML = "⚠️ A Color Required!";`
	`27`	`+ return false;`
	`28`	`+`
	`29`	`+ } else{`
	`30`	`+`
	`31`	`+ message.innerHTML = "";`
	`32`	`+ return true; // Submit the form`
	`33`	`+`
	`34`	`+ }`
	`35`	`+`
	`36`	`+}`

Lines changed: 14 additions & 0 deletions

Comments

(0)