Basic validation

Learn basic validation with required fields and length checks.

Required field check

To check that a field was not left empty, you clean it with trim and compare it to the empty string. This is the most basic validation step.

const name = input.value.trim();
if (name === '') {
  console.log('Name required');
}

Fields filled with only spaces are caught by this check. Showing the error to the user with visual feedback comes in later lessons.

Length check

To ask for a longer value, you use the length property. The string's length comes back as a number and is checked with comparison operators.

const value = input.value.trim();
if (value.length < 3) {
  console.log('At least 3 characters');
}

>= means 'at least', > means 'more', <= means 'at most', < means 'less'. Keep the validation message short and clear.

Exercise Validate the name field

The nameInput variable points to an input field. Clean its value with trim. If empty, log 'Name required'; if shorter than 3 characters, log 'At least 3 characters'; otherwise log 'OK'.

Show example solution

const name = nameInput.value.trim();
if (name === '') {
  console.log('Name required');
} else if (name.length < 3) {
  console.log('At least 3 characters');
} else {
  console.log('OK');
}

Test yourself

Match validation patterns

value.trim() === ''

Empty field check
value.length >= 3

At least 3 characters
value.length < 3

Too short value

Which correctly applies 'at least 3 characters'?

const value = input.value.trim();
// A
if (value.length >= 3) { console.log('OK'); }
// B
if (value.length = 3) { console.log('OK'); }
// C
if (value.length > 3) { console.log('OK'); }
// D
if (value = 3) { console.log('OK'); }

Show answer

A — Correct! >= 3 means '3 or more'; it also accepts exactly 3 characters.

Complete the length check

const value = input.value.trim();
if (3 > value.____) {
  console.log('Too short');
}

Show answer

const value = input.value.trim();
if (3 > value.length) {
  console.log('Too short');
}

Next lesson: Checkbox and radio

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies