Client-Side Validation
In this page:
Required Fields
Checking that required fields aren't empty before allowing submission gives the user immediate, useful feedback instead of letting an incomplete form reach the server. This is typically done by testing val().trim() against an empty string on submit or blur.
Example: Required Fields
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<script>
if ($("#name").val().trim() === "") {
console.log("Name is required");
}
</script>
</body>
</html>Email Validation
A simple regular expression can check the basic shape of an email address -- something like text, an @ symbol, and a domain -- though it can't confirm the address actually exists. It's meant to catch obvious typos, not to guarantee deliverability.
Example: Email Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text" value="not-an-email">
<script>
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(pattern.test($("#email").val()));
</script>
</body>
</html>Length Validation
Length checks are useful for fields like passwords and messages that need a minimum or maximum number of characters. Reading val().length lets you compare the current input against whatever bounds the field requires.
Example: Length Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="password" type="text" value="abc">
<script>
if ($("#password").val().length < 8) {
console.log("Password too short");
}
</script>
</body>
</html>Validation Messages
Clear, specific validation messages -- naming exactly what's wrong and where -- make forms easier to understand than a single generic error at the top of the page. Placing the message right next to the invalid field helps users fix the problem faster.
Example: Validation Messages
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" type="text">
<span id="emailError"></span>
<script>
$("#emailError").text("Please enter a valid email address");
</script>
</body>
</html>Complete Validation
Combining required-field, format, and length checks into one validation flow lets you catch every problem before submission and report them all together. Running all checks up front, rather than one at a time, avoids frustrating the user with repeated resubmissions.
Example: Complete Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<input id="email" type="text" value="bad">
<script>
const errors = [];
if ($("#name").val().trim() === "") errors.push("Name required");
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($("#email").val())) errors.push("Invalid email");
console.log(errors);
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: