Last active
October 24, 2018 13:13
-
-
Save iiic/369707cef9414969173a5142d1f5b43a to your computer and use it in GitHub Desktop.
javascript setCustomValidity.js s ukázkovým html souborem, zobrazování hlášek k formulářovým prvkům vkládaným zcela běžným způsobem přes funkci setCustomValidity
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>visual use of native setCustomValidity function</title> | |
| <style> | |
| form.was-validated :valid { | |
| border: 3px solid green; | |
| } | |
| form.was-validated :invalid { | |
| border: 3px solid red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="#formular-odeslan" id="formular" class="needs-validation"> | |
| // jediný povolený znak je číslo 3 | |
| <br> | |
| <input type="text" id="vstup" pattern="3" placeholder="příklad špatně vyplněného formulářového prvku" required size="50"> | |
| <br> | |
| <input type="submit" value="odeslat formulář"> | |
| </form> | |
| <script title="setCustomValidity.js"> | |
| 'use strict'; | |
| /** | |
| * @description : Takes string used by native HTML5 validation function setCustomValidity() | |
| * and places it into (newly created) span element for validation result. | |
| */ | |
| ( () => { | |
| const FORM_NEEDS_VALIDATION_CLASSNAME = 'needs-validation'; | |
| const customValidityBootstrap = function ( | |
| /** @type {Function} */ proxied, | |
| /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ self, | |
| /** @type {Object} */ args | |
| ) { | |
| const INVALID_FEEDBACK_CLASSNAME = 'invalid-feedback'; | |
| if ( args[ 1 ] ) // native function | |
| { | |
| delete args[ 1 ]; | |
| } else | |
| { // this special function | |
| const eventName = ( self.type === 'checkbox' || self.type === 'radio' ) ? 'change' : 'input'; | |
| self.addEventListener( eventName, function inputEvent() { | |
| self.removeEventListener( eventName, inputEvent ); // self-destruction | |
| args[ 0 ] = ''; | |
| proxied.apply( self, args ); | |
| }, false ); | |
| let feedbackElement = document.createElement( 'span' ); | |
| if ( self.nextElementSibling && self.nextElementSibling.classList.contains( INVALID_FEEDBACK_CLASSNAME ) ) | |
| { | |
| /** @type {HTMLElement} */ | |
| feedbackElement = ( self.nextElementSibling ); | |
| } else if ( args[ 0 ] ) | |
| { | |
| feedbackElement.classList.add( INVALID_FEEDBACK_CLASSNAME ); | |
| self.parentNode.insertBefore( feedbackElement, self.nextElementSibling ); | |
| } | |
| self.addEventListener( eventName, function liveValidation( /** @type {Event} */ event ) { | |
| /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ | |
| const formItem = ( event.target ); | |
| feedbackElement.hidden = ( formItem.validity.valid ) ? true : false; | |
| }, false ); | |
| feedbackElement.textContent = args[ 0 ]; | |
| } | |
| return proxied.apply( self, args ); | |
| }; | |
| ( function ( /** @type {Function} */ proxied ) { | |
| HTMLSelectElement.prototype.setCustomValidity = function () { | |
| return customValidityBootstrap( proxied, this, arguments ); | |
| }; | |
| } )( HTMLSelectElement.prototype.setCustomValidity ); | |
| ( function ( /** @type {Function} */ proxied ) { | |
| HTMLInputElement.prototype.setCustomValidity = function () { | |
| return customValidityBootstrap( proxied, this, arguments ); | |
| }; | |
| } )( HTMLInputElement.prototype.setCustomValidity ); | |
| ( function ( /** @type {Function} */ proxied ) { | |
| HTMLTextAreaElement.prototype.setCustomValidity = function () { | |
| return customValidityBootstrap( proxied, this, arguments ); | |
| }; | |
| } )( HTMLTextAreaElement.prototype.setCustomValidity ); | |
| [ ...document.getElementsByClassName( FORM_NEEDS_VALIDATION_CLASSNAME ) ].forEach( ( /** @type {HTMLFormElement} */ form ) => { | |
| const WAS_VALIDATED_CLASSNAME = 'was-validated'; | |
| form.noValidate = true; | |
| form.addEventListener( 'submit', ( /** @type {Event} */ event ) => { | |
| /** @type {HTMLFormElement} */ | |
| const form = ( event.target ); | |
| form.classList.add( WAS_VALIDATED_CLASSNAME ); | |
| }, false ); | |
| } ); | |
| } )(); | |
| </script> | |
| <script> | |
| 'use strict'; | |
| // příklad validačního formuláře | |
| document.getElementsByClassName( 'needs-validation' )[ 0 ].addEventListener( 'submit', ( /** @type {Event} */ event ) => { | |
| const vstup = document.getElementById( 'vstup' ); | |
| let validita = ''; // prázdný řetězec znamená validní | |
| if ( vstup.value === '' ) | |
| { | |
| validita = 'hodnota musí být vyplněna'; | |
| } else if ( vstup.value !== '3' ) | |
| { | |
| validita = 'nezadali jste číslo 3'; | |
| } | |
| vstup.setCustomValidity( validita ); | |
| if ( event.target.checkValidity() === false ) | |
| { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| } | |
| }, false ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment