Page 153 - CITS - Computer Software Application -TT

COMPUTER SOFTWARE APPLICATION - CITS

alert(“Demo only. No form was posted.”);
}
});
Code language: JavaScript (javascript)
How it works.

The showMessage() function
The showMessage() function accepts an input element, a message, and a type:
// show a message with a type of the input
function showMessage(input, message, type) {

// get the <small> element and set the message
const msg = input.parentNode.querySelector(“small”);
msg.innerText = message;
// update the class for the input
input.className = type ? “success” : “error”;
return type;

}Code language: JavaScript (javascript)
The following shows the name input field on the form:
<div class=”field”>
<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name” placeholder=”Enter your fullname” />
<small></small>
</div>Code language: HTML, XML (xml)
If the name’s value is blank, you need to get its parent first which is the <div> with the class “field”.
input.parentNodeCode language: CSS (css)

Next, you need to select the <small> element:
const msg = input.parentNode.querySelector(“small”);Code language: JavaScript (javascript)
Then, update the message:
msg.innerText = message;

After that, we change the CSS class of the input field based on the value of the type parameter. If the type is true,
we change the class of the input to success. Otherwise, we change the class to error.
input.className = type ? “success” : “error”;Code language: JavaScript (javascript)
Finally, return the value of the type:

return type;Code language: JavaScript (javascript)
The showError() and showSuccess() functions
The the showError() and showSuccess() functions call the showMessage() function. The showError() function
always returns false whereas the showSuccess() function always returns true. Also, the showSuccess() function
sets the error message to an empty string.
function showError(input, message) {
return showMessage(input, message, false);

}

140

CITS : IT&ITES - Computer Software Application - Lesson 37 - 46