JSFiddle - React, Tailwind, and code Playground

by franklinjavier

HTML

<input type="text" pattern="[-0-9]+" required error-empty="please enter the date you want to attend the performance on" />
http://www.broken-links.com/tests/html5forms/

CSS

::-webkit-validation-bubble-message {
    color: #eee;
    background: #000;
    border-color: #444;
    -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5);
}

::-webkit-validation-bubble-message:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
}

::-webkit-validation-bubble-arrow {
    background: #000;
    border-color: #444;
    -webkit-box-shadow: 0 0 0 0;
}

JavaScript

function hasValidation() {
            return 'noValidate' in document.createElement('form');
        }
        function formCheckVal() {
            var formValidity = document.forms[0].checkValidity();
            (formValidity === true ) ? window.alert('This form will validate') : window.alert('This form will not validate');
        }
        function inputCheckVal(inputId) {
            var inputValidity = document.getElementById(inputId).checkValidity();
            if (inputValidity === true ) {
                window.alert('This input will validate');
            } else {
                var validityStatus = document.getElementById(inputId).validity;
                var validityString = '';
                for (prop in validityStatus) {
                    if(validityStatus[prop] === true) {
                        window.alert('This input will not validate because: ' + prop);
                    }
                }
                //window.alert(validityStatus);
            }
        }
        window.onload = function() {
            var doesItValidate = hasValidation();
            if (doesItValidate === true) {
            // Check validity of form
                document.getElementById('form_checkval').addEventListener('click',formCheckVal,true);
            // Check validity of inputs
                var inputLabels = document.querySelectorAll('label');
                var labelCount = inputLabels.length;
                for (i=0;i<labelCount;i++) {
                    inputLabels[i].addEventListener('click',function(){
                        var labelFor = this.getAttribute('for');
                        inputCheckVal(labelFor);
                    },false);
                }
            }
        }