New to HTML.I am trying to show the bubble hovering over the input box when the user does not enter any value or if the entries are numbers. I can see the border changing with invalid input but I do not see the text bubble hovering over the input with the error message. here is the HTML file and the .gs file installing the sidebar.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
document.getElementById("GetRows").reset();
}
</script>
<style>
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Enter rows separated by commas</h3>
<form id="GetRows">
<label for="rows">rows</label>
<input type="text"
id="rows"
name="rows"
pattern="^[0-9]+(,[0-9]+)*$"
required
oninvalid="setCustomValidity('enter numbers separated by commas')"
oninput="setCustomValidity('') " >
<br>
<input type="button" value="Submit" onClick="submitForm();">
</form>
</body>
</html>
.gs file
function getRows() {
var form = HtmlService.createHtmlOutputFromFile('DoneTrades');
SpreadsheetApp.getUi().showSidebar(form);
}
