Commit 528caf7

committed

Web-API

1 parent 5e2baca commit 528caf7Copy full SHA for 528caf7

File tree

+69

-0

lines changed

JavaScript/Advance/Web API/web-form API
- images
  - js-logo.png
- index.html
- script.js

+69

-0

lines changed

4.15 KB

Lines changed: 31 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,31 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>Web-Form API</title>`
	`9`	`+</head>`
	`10`	`+`
	`11`	`+<body>`
	`12`	`+ <h1>Web Form Validation API</h1>`
	`13`	`+ <!-- Example Three -->`
	`14`	`+ <h2>checkValidity</h2>`
	`15`	`+ <input id="inputOne" type="number" min="100" max="300" required>`
	`16`	`+ <button onclick="DisplayOne()">Click</button>`
	`17`	`+ <p id="textOne"></p>`
	`18`	`+ <!-- Example Two -->`
	`19`	`+ <h2>rangeOverflow()</h2>`
	`20`	`+ <input id="inputTwo" type="number" max="100">`
	`21`	`+ <button onclick="DisplayTwo()">Click</button>`
	`22`	`+ <p id="textTwo"></p>`
	`23`	`+ <!-- Example Three -->`
	`24`	`+ <h2>rangeUnderflow()</h2>`
	`25`	`+ <input type="number" min="100" id="inpThree">`
	`26`	`+ <button onclick="DisplayThree()">Click</button>`
	`27`	`+ <p id="textThree"></p>`
	`28`	`+ <script src="script.js"></script>`
	`29`	`+</body>`
	`30`	`+`
	`31`	`+</html>`

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+/* Validation in JavaScript API`
	`2`	`+ There many types of Validation at first we will try`
	`3`	`+ 1.checkValidity()`
	`4`	`+*/`
	`5`	`+`
	`6`	`+let textOne = document.getElementById('textOne');`
	`7`	`+`
	`8`	`+function DisplayOne() {`
	`9`	`+ const InpObjOne = document.getElementById('inputOne');`
	`10`	`+ if (!InpObjOne.checkValidity()) {`
	`11`	`+ textOne.innerHTML = InpObjOne.validationMessage;`
	`12`	`+ } else {`
	`13`	`+ textOne.innerHTML = "Great it's OK!"`
	`14`	`+ }`
	`15`	`+}`
	`16`	`+`
	`17`	`+// 2. rangeOverflow Property`
	`18`	`+`
	`19`	`+let textTwo = document.getElementById('textTwo');`
	`20`	`+`
	`21`	`+function DisplayTwo() {`
	`22`	`+ let inputTwo = document.getElementById('inputTwo');`
	`23`	`+ if (inputTwo.validity.rangeOverflow) {`
	`24`	`+ text = "Value is Too Large"`
	`25`	`+ }`
	`26`	`+}`
	`27`	`+`
	`28`	`+`
	`29`	`+// 3. rangeUnderflow Property`
	`30`	`+`
	`31`	`+let textThree = document.getElementById('textThree');`
	`32`	`+`
	`33`	`+function DisplayThree() {`
	`34`	`+ let inpThree = document.getElementById('inpThree');`
	`35`	`+ if (inpThree.validity.rangeUnderflow) {`
	`36`	`+ textThree.innerHTML = "Value is Too Small"`
	`37`	`+ }`
	`38`	`+}`

Comments

(0)