We Keep Coding

HTML 5 Validation Customization

I would like to have a form that:
Display validation messages in a custom format instead of the default style.
Display all invalid field bubbles at once instead of one at a time.
Right now, I am stuck with the boring browser-specific message appearance and I don't see the next error until I correct the last one. This is a really bad user experience, so looking for a few pointers on how to address this.
This is my current JavaScript code:
const contactUsForm = document.querySelector('#Form');
if (contactUsForm) {
function Validate() {
validatedFields = contactUsForm.querySelectorAll('[data-validation-required],[data-validation-format]');
validatedFields.forEach(field => {
/* RegEx patterns */
const emailPattern = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i;
if (field.getAttribute('type') === 'email')
{
field.setAttribute('pattern', emailPattern);
}
if (field.validity.valueMissing) {
field.setCustomValidity(field.dataset.validationRequired);
}
else if (field.validity.patternMismatch) {
field.setCustomValidity(field.dataset.validationFormat);
}
else {
field.setCustomValidity('');
}
field.reportValidity();
contactUsForm.checkValidity();
/* Recheck on field value change */
field.addEventListener('change', function() {
field.setCustomValidity('');
Validate();
});
});
}
Validate();
contactUsForm.addEventListener('submit', function(e) {
e.preventDefault;
if (e.checkValidity() == false) {
return false;
}
else {
// form.submit()
}
});
}

Styling validation bubbles/tooltips used to be feature but only exclusive to Chrome, however it got removed.
More information about it here:
How do you style the HTML5 form validation messages?
However, you can create your own tooltips or bubbles to display validation messages. With use of a div container and a span and a little bit of CSS, you can create a bubble with almost any kind of look you can image.
.ttCont {
position: relative;
display: inline-block;
}
.ttCont .ttText {
display: inline-block;
visibility: hidden;
min-width: 200px;
background-color: darkblue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
opacity: 0;
transition: opacity 0.5s;
/* Place bubble to the right of container */
position: absolute;
z-index: 1;
top: 5px;
left: 105%;
}
.ttCont .ttText::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the bubble */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent darkblue transparent transparent;
}
.ttCont .ttText.active{
visibility: visible;
opacity: 1;
}
Use of custom bubbles now means that you might need to use less of the ValidityState API, however you can still validate your fields using the same approach. Instead of using field.reportValidity(), you can create a custom function that shows a bubble whenever each field validates
function customReportValidatity(elem, type) {
let msg = "";
///check if validity is based on required or mismatch///
switch (type) {
case 'required':
msg = $(elem).attr('data-validation-required');
///without jQuery
// msg = elem.dataset.validationRequired;
break;
case 'format':
msg = $(elem).attr('data-validation-format');
///without jQuery
// msg = elem.dataset.validationFormat;
break;
default:
break;
}
///make popup appear///
let ttText = $(elem).parent().children('.ttText');
$(ttText).text(msg);
$(ttText).addClass('active');
///without jQuery
// let ttText = elem.parentElement.querySelector('.ttText');
// ttText.innerText = msg;
// ttText.classList.add('active');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
With that styling and custom function, you can apply it to your existing code for any form you are willing to apply to. In this case, I made an example form that takes in a name and email that are required, while the description is not required.
const contactUsForm = document.querySelector('#Form');
const submitBtn = document.querySelector('#submitBtn');
if (contactUsForm) {
function customReportValidatity(elem, type) {
let msg = "";
///check if validity is based on required or mismatch///
switch (type) {
case 'required':
msg = $(elem).attr('data-validation-required');
///without jQuery
// msg = elem.dataset.validationRequired;
break;
case 'format':
msg = $(elem).attr('data-validation-format');
///without jQuery
// msg = elem.dataset.validationFormat;
break;
default:
break;
}
///make popup appear///
let ttText = $(elem).parent().children('.ttText');
$(ttText).text(msg);
$(ttText).addClass('active');
///without jQuery
// let ttText = elem.parentElement.querySelector('.ttText');
// ttText.innerText = msg;
// ttText.classList.add('active');
}
function Validate() {
let isValid = true;
/* RegEx patterns */
const emailPattern = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i;
let validatedFields = contactUsForm.querySelectorAll('[data-validation-required],[data-validation-format]');
validatedFields.forEach(field => {
if (field.getAttribute('type') === 'email') {
field.setAttribute('pattern', emailPattern);
}
if (field.validity.valueMissing) {
field.setCustomValidity(field.dataset.validationRequired);
customReportValidatity(field, 'required');
isValid = false;
} else if (field.validity.typeMismatch) {
//using typeMismatch instead of patternMismatch because the regex is not working for emails
field.setCustomValidity(field.dataset.validationFormat);
customReportValidatity(field, 'format');
isValid = false;
}
contactUsForm.checkValidity();
/// Recheck on field value change ///
field.addEventListener('change', function() {
$('.ttText').removeClass('active');
///without jquery
/*document.querySelectorAll('.ttText').forEach((tt)=>{
tt.classList.remove('active');
});*/
Validate();
});
});
return isValid;
}
submitBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
if (Validate()) {
// contactUsForm.submit();
//you can use this output to check if the form will submit
console.log("Form Submitted!");
} else {
return false;
}
});
}
.ttCont {
position: relative;
display: inline-block;
}
.ttCont .ttText {
display: inline-block;
visibility: hidden;
min-width: 200px;
background-color: darkblue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
opacity: 0;
transition: opacity 0.5s;
position: absolute;
z-index: 1;
top: 5px;
left: 105%;
}
.ttCont .ttText::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent darkblue transparent transparent;
}
.ttCont .ttText.active {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="Form">
<div class="ttCont">
<label for="name">Name</label><br/>
<input type="text" name="name" required data-validation-required="Name is required!" /><br/>
<span class="ttText"></span>
</div>
<br/><br/>
<div class="ttCont">
<label for="email">Email</label><br/>
<input type="email" name="email" required data-validation-required="Email is required" data-validation-format="Email must have the format similar to example#email.com!" /><br/>
<span class="ttText"></span>
</div>
<br/><br/>
<div class="ttCont">
<label for="desc">Description</label><br/>
<input type="text" name="desc" data-validation-required="Description is required!" /><br/>
<span class="ttText"></span>
</div>
<br/><br/>
<button type="button" id="submitBtn">Submit</button>
</form>
You can read more about how to create and handle custom tooltips here:
W3Schools Tooltips
LogRocket Tutorial

Replace CHOOSE FILE with an image

Hi I am trying to replace the choose file button with an image. I am using javascript to create the button but when I am inspecting the website, it shows me a html script of the button which is of type= file.
To create it, I used:
input = createFileInput(handleFile);
input.elt.style["width"] = "40%";
input.elt.style["font-size"]="3vmin";
function handleFile(file) {
print(file);
if (file.type === 'image') {
imgFile = file.data;
img = createImg(file.data);
img.hide();
canvas.image(img, 0, 0, 224, 224);
image(img, 0, 0, width, height/2);
img.remove();
}
mode = 1;
tint = false;
}
Can anyone suggest how I can change the generic button with an image.

I think you can cheat and position an image over the input, then add a click handler to the image and pass it through to the input button below.
Is this what you are trying to achieve?
const input = document.querySelector("#avatar");
const button = document.querySelector("#button");
button.addEventListener('click', event => input.click(event));
.body {
font-family: sans-serif;
}
label {
display: inline-block;
padding: 1em 0;
}
.wrapper {
position: relative;
}
#avatar {
display: block;
height: 50px;
border: 1px solid #333;
}
#button {
position: absolute;
left: 1px;
top: 1px;
}
<div class="body">
<label for="avatar">Choose a profile picture:</label>
<div class="wrapper">
<input type="file" id="avatar" name="avatar">
<img id="button" src="https://via.placeholder.com/75x50/333333/ffffff?text=Avatar"></img>
</div>
</div>

Cannot choose file by dropping file on area outside the button but inside input only when using Shadow DOM

In chrome, following input element can be dragged and dropped to the bottom area of the input.
I expect this behavior.
<input type="file" class="input-file">
<style>
.input-file {
display: block;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
</style>
However, it is different inside Shadow DOM.
Following input element can be dragged and dropped to only the "choose file" button located the left top area of the input.
Dropped file is opened not chosen when file is droppped to the bottom area of the input.
customElements.define("foo-bar", class extends HTMLElement {
constructor(){
super()
this.attachShadow({mode: "open"}).innerHTML = `
<input type="file" class="input-file">
<style>
.input-file {
display: block;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
</style>
`
}
})
document.body.innerHTML = "<foo-bar></foo-bar>"
I think that this is a bug caused by events not being notified outside of Shadow DOM.
Is there a workaround?

The workaround is to process the drop event.
this.shadowRoot.querySelector( 'input' ).ondrop = ev => {
console.log( 'dropped in', ev.dataTransfer.items.length )
for ( var i = 0 ; i < ev.dataTransfer.items.length ; i++ ) {
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile()
console.log( 'file[' + i + '].name = ' + file.name )
}
}
ev.preventDefault()
}
Don't forget to invoke the preventDefault() method to abort the file opening.

I know this is an old question but the bug is still not fixed. I found a CSS workaround for Chrome to use the input button instead of the input for the draft & drop. In my case I used an opacity of 0 so the design is not an issue for me.
customElements.define("foo-bar", class extends HTMLElement {
constructor(){
super()
this.attachShadow({mode: "open"}).innerHTML = `
<input type="file" />
<style>
input {
display: block;
width: 300px;
height: 300px;
border: 1px solid red;
margin: 10px;
}
input::-webkit-file-upload-button {
width: 300px;
height: 300px;
}
</style>
`
}
})
<foo-bar></foo-bar>

Drag and Drop input for files not handling files

I've made a form where the user can upload a file and I wanted to add a drag and drop feature so I made it like this:
<small id="filename"></small>
<!-- <input id="thumbnail" type="file" name="thumbnail" class="input input-thumbnail form-control"> -->
<div class="dropzone" id="droparea">
<div class="input-container">
<input type="file" class="dropzone-input" id="thumbnail-input" name="thumbnail">
</div>
<div class="overlay">
<small class="overlay-text" id="overlay-text">Drag and Drop</small>
</div>
</div>
<script>
(function() {
let dropzone = document.getElementById('droparea');
let dropzonetext = document.getElementById('overlay-text');
let filenametext = document.getElementById('filename');
let fileImput = document.getElementById('thumbnail-input');
dropzone.ondrop = function(e) {
e.preventDefault();
this.className = 'dropzone';
dropzonetext.className = 'overlay';
fileImput.files[0] = e.target.files[0];
filenametext = fileImput.files[0].name
};
dropzone.ondragover = function() {
this.className = 'dropzone dragover';
dropzonetext.className = 'overlay dragover';
return false;
};
dropzone.ondragleave = function() {
this.className = 'dropzone';
dropzonetext.className = 'overlay';
return false;
};
}());
</script>
The expected behavior of this code is that the box changes color (controlled by css) whenever the user hovers over it when holding 1 or multiple files (I want to limit it to only accept 1 file). But this does not work.
Also whenever the file is dropped on the box the value of the input should become the file dropped by the user but this is not happening either.
Instead I'm getting this error in the console whenever I drop the file there:
Uncaught TypeError: Cannot read property '0' of undefined
at HTMLDivElement.dropzone.ondrop ((index):79)
dropzone.ondrop # (index):79
With line 79 being: fileImput.files[0] = e.target.files[0];
What is causing this problem?
Here is also the css for the drag and drop:
.dropzone-input{
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
width: 30vw;
height: 25vh;
z-index:0;
position: absolute;
color: #ccc;
line-height:25vh;
text-align: center;
}
.dragover{
border-color: black;
text-color: black;
}
.dropzone {
width: 30vw;
height: 25vh;
overflow: hidden;
position: relative;
border: 2px dashed #ccc;
}
.overlay {
width: 30vw;
height: 25vh;
position: absolute;
top: 0;
left: 0;
z-index:1;
line-height:25vh;
text-align: center;
}
.overlay-text{
color: darkgrey;
}
.overlay-text.dragover{
text-color: black;
}
**EDIT: **
Someone asked for a screenshot:
you can see the file selected is the one I dropped on the input

The result is that, e.target.files is null. Because you set event ondrop on dropzone, so e.target maybe any ele in dropzone where you drop (detail in the picture test on my local). But some elements don't have files property. The ele which have files property is the input. So you should try 1 option:
Option 1,set the ondrop event for only the input
Option 2, check the e.target .
if(e.target is input) use
fileImput.files[0] = e.target.files[0];
else use
fileImput.files[0] = e.target.parentElement.querySelector('#thumbnail-input').files[0];

IE JS compatibility - working in FF?

The following code displays as intended in FireFox, but isn't displaying at all in Internet Explorer (v8).
// getLimits init
Frog.API.get('users.getInfo',
{
'params': {'id': UWA.Environment.user.id, 'details':'groups' },
'onSuccess': AssignPoints.getLimit,
'onError': function(err) { alert(err); }
});
...
// work out the user's limit, and how many points they've spent this week
// use LEAP library if necessary
AssignPoints.getLimit = function(data) {
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
if (AssignPoints.Limit == 0) {
AssignPoints.Specialist = true;
}
UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent);
}
AssignPoints.getPointsSpent = function(data) {
AssignPoints.SpentWeekly = data.SpentWeekly;
AssignPoints.SpentTotal = data.SpentTotal;
AssignPoints.displayLimitAndTotals();
}
// display data from getLimitAndTotals
AssignPoints.displayLimitAndTotals = function() {
var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
if (AssignPoints.Specialist == false) {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
} else {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
}
LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' +
'<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';
$('div#limits').html(LimitsAndTotalsHTML);
}
EDIT: CSS & HTML
I don't think it's a CSS/HTML issue, as I have the previous version of this script (which I decided to rewrite because it was hideous code and some odd mash-up of procedural and just pure bodging) which displays correctly in IE using exactly the same HTML&CSS.
#total_container
{ overflow: hidden; width: 870px; }
#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }
span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }
#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }
#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }
The HTML is just <div id="limits"></div> and the JS updates it.
// EDIT
SECOND EDIT: ALERTS
I've tried putting random alerts into the code. In IE, in the for (var i in data[0].groups) loop, the alerts work. If I place an alert at any point after that for loop, the alert doesn't appear at all, regardless of whether I use a variable name or a random string such as "test".
In FF, the alerts work regardless of placement within either function.
** // SECOND EDIT **
FireFox, working as intended
Internet Explorer, b0rked
Does anyone know what might be breaking IE?
Thanks in advance.

OK! I've found the problem.
IE didn't like this segment of code:
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
When I've changed that to this format:
for (var i = 0; i < data[0].groups.length; i++) {
if (data[0].groups[i].name.substr(0,4) == "LEAP") {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
It works as intended in FF and IE.