Try this.
function validateForm() {
let errorMsg =
" Invalid entry. This field can not be blank. Please enter a value.";
let name = document.getElementById("userName");
if (name.value === "") {
let errElem = document.createElement("span");
errElem.setAttribute("class", "error");
errElem.textContent = errorMsg;
name.after(errElem);
}
} <input name="username" id="userName">
<button type="button" onclick="validateForm()">Validate</button>if value is blank add text to span with the id=”error” in html
if (input !== "") {
// if value isn't blank do this
}
else{
document.getElementById("error").innerHTML = "Invalid entry. This field can not be blank. Please enter a value.";
}
HTML:
<span id="error"></span>
alternative which also creates the span in javascript:
if (input !== "") {
// if value isn't blank do this
}
else{
const span = document.createElement("span");
span.innerHTML = "Invalid entry. This field can not be blank. Please enter a value.";
const att = document.createAttribute("class");
att.value = "error";
span.setAttributeNode(att);
document.body.appendChild(span); // Append <span> to <body>
}
As you tried, a “generic” function can be used in order to check the validity of any input value with handleInvalidities(inputValue)
Then a function validateField(elementId) to apply the above validation and print the error itself. Then the onSubmit function where you can call the validate field for any input field from your form
EDIT
Yes, it is possible, I created a div with all specifications (I tried with span but didn’t succeed 🙁 ) and for each element the error div will be appended, the elements structure will be
<div>
<input/>
<errorDiv/>
</div>
If you write the text in input and press submit, the error will disappear. xD
function handleInvalidities(inputValue) { // Takes input field as parameter
if (inputValue == null || inputValue == "") {
return "Invalid entry. This field can not be blank. Please enter a value.";
} else {
return "";
}
}
function createErrorDivforElement(elementId, message) {
let div = document.createElement("div");
div.style.width = "auto";
div.style.height = "18px";
div.classList.add("error");
div.innerHTML = message;
div.id = elementId + "_error";
return div;
}
function validateField(elementId) {
const element = document.getElementById(elementId);
const elementValue = element.value;
const error = handleInvalidities(elementValue)
const errorDiv = createErrorDivforElement(elementId, error);
// if it's = 2, it already has the error div attached
if (element.parentNode.childNodes.length < 2) {
element.parentNode.appendChild(errorDiv);
}
var errDiv = document.getElementById(elementId + "_error");
if (error !== "") {
errDiv.style.display = "block";
} else {
errDiv.style.display = "none";
}
}
function onSubmit() {
validateField("userName");
validateField("country");
}.error {
color: red;
}<div><input type="text" id="userName" aria-describedby="name-format" placeholder="Name"></div>
<div><input type="text" id="country" aria-describedby="name-format" placeholder="Country"></div>
<button type="submit" value="submit" onclick="onSubmit()">Submit</button>I want to display a error message when the value username is incorrect. but is not working
function handleInvalidities(input) { // Takes input field as parameter
let errMsg = "";
if (input.validity.valueMissing) {
errMsg = "Invalid entry. This field can not be blank. Please enter a value."; // Check for missing fields
return errMsg;
}
function validateForm(errMsg) {
let name = document.getElementById('userName');
if (name == null || name == "") {
let errElem = document.createElement("span");
errElem.setAttribute("class", "error");
let errText = document.createTextNode(errMsg);
errElem.appendChild(errText);
}
}the div wasn’t supposed to be a span since createElement(span) is being used? if I create a element span with a class of error.
If you don’t want the extra div , then you have to select the input and append the span after it.
Something like, name.appendAfter(errElem).
Thanks for that. I tried this and msg still doesn’t show. Now the register button is not submitting to another page.
I used the alert msg before just to check if the code was working.. but I want to create in javascript a span with a class of error do display the message when the value is empty.
I undestand thx. but there’s any other way of doing the same thing without touching the HTML? via Dom javascript? I Just want to create in javascript a span with a class of error to display the message when is empty.