Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Charles Willden
12,357 PointsReplace method returning 'Undefined' in form
I've checked everything numerous times and the result in the browser keeps coming back 'Undefined' when I change the focus from the telephone input.
const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const telephoneInput = document.getElementById("telephone");
const emailInput = document.getElementById("email");
/**
*
* VALIDATORS
*
*/
// Can only contain letters a-z in lowercase
function isValidUsername(username) {
return /^[a-z]+$/.test(username)
}
// Must contain a lowercase, uppercase letter and a number
function isValidPassword(password) {
return /[a-z]+/.test(password) && /[A-Z]+/.test(password) && /\d+/.test(password)
/*Using "lookaheads": /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/
.*\d = zero or more characters and a digit
.*[a-z] = zero or more characters and a lowercase letter
.*[A-Z] = zero or more characters and an uppercase letter
*/
}
// The telephone number must be in the format of (555) 555-5555
function isValidTelephone(telephone) {
return /^\D*\d{3}\D*\d{3}\D*\d{4}\D*$/.test(telephone)
}
// Must be a valid email address
function isValidEmail(email) {
return /\[^@]+@[^@.]+\.[a-z]+/i.test(email)
}
/**
*
* FORMATTING FUNCTIONS
*
*/
function formatTelephone(text) {
const regex = /^\D*(\d{3})\D*(\d{3})\D*(\d{4})\D*$/;
text.replace(regex, '($1) $2-$3');
}
/**
*
* SET UP EVENTS
*
*/
function showOrHideTip(show, element) {
// show element when show is true, hide when false
if (show) {
element.style.display = "inherit";
} else {
element.style.display = "none";
}
}
function createListener(validator) {
return e => {
const text = e.target.value;
const valid = validator(text);
const showTip = text !== "" && !valid;
const tooltip = e.target.nextElementSibling;
showOrHideTip(showTip, tooltip);
};
}
usernameInput.addEventListener("input", createListener(isValidUsername));
passwordInput.addEventListener("input", createListener(isValidPassword));
telephoneInput.addEventListener("input", createListener(isValidTelephone));
telephoneInput.addEventListener("blur", e => {
e.target.value = formatTelephone(e.target.value);
});
emailInput.addEventListener("input", createListener(isValidEmail));
1 Answer
Charles Willden
12,357 Pointsfound the problem... duh. I was missing a 'return' keyword in the formatTelephone definition
function formatTelephone(text) {
const regex = /^\D*(\d{3})\D*(\d{3})\D*(\d{4})\D*$/;
return text.replace(regex, '($1) $2-$3');
}