Client side validation is so important
by preventing the user from submitting wrong data into the server, it would be better for the server not receiving invalid data and it’s better for the user not to wait until the page reloads tells him that the data is incorrect.

some examples we may check for

  • Required
  • Length
  • Minimum/Maximum (numerical input)
  • Pattern (E-mail)


suppose we’ve the following registration form inside the body tag of the page

Registeration form

name
pass
email
age

we want to validate some records before submitting
we can do so by checking our input on a specific event
we have a button called “check” ready for that job we could use it to check for the required constraint for the name field
in our new method we want to get the text entered in the text field, we can do so by many ways

//1
value = document.forms['regform'].elements['name'].value;

//2
value = regform.name.value;

in the first way from the document it has a collection/array called forms that contains all the forms in the document, we can get a reference to the reg form by accessing it with index or name
the form itself contains another collection called elements that contains all inner elements inside the form, we can get a reference to the input by the same way

the second way is easier by writing the form name, then dot, then the input field name

with a reference to the input field we can get the text by the value property

function checkName()
{
	value = document.forms['regform'].elements['name'].value;
	if(value.length == 0)
	{
		alert("error");
		return false;
	} else {
		return true;
	}
}

we could make a more convenient validation on real time by checking the value after modifying the field
we can use some of the attributes like onblur or onchange


the alert message is not a good solution to notify the user about errors
we can show a message beside every input field that clarify the error
we can do so by adding a new column that has no data by default, we can set data into if there are any errors
we can also add a custom CSS style to the error messages(like red text color)

// in the head section


.
.
.

// in the body section

Registeration form

name
pass
email
age

we can now build function to check all form inputs

function checkName()
{
	value = form1.name.value;
	if(value.length == 0)
	{
		document.getElementById("error_name").innerHTML = "invalid name";
		return false;
	} else {
		document.getElementById("error_name").innerHTML = "";
		return true;
	}
}

function checkPass()
{
	value = form1.pass.value;
	if(value.length < 8)
	{
		alert("invalid pass");
	}
}

function checkMail()
{
	value = form1.email.value;
	if(value.indexOf("@") == -1)
	{
		alert("invalid mail");
	}
}


function checkAge()
{
	value = form1.age.value;
	if(value < 20)
	{
		alert("invalid age");
	}
}

we can now check for all the errors, but till now the form can be submitted although there are errors in it.
we can disable submitting the form by returning false to the onclick attribute only if the form contains validation errors
so we can write a method to check all the fields in the form and returns true if all fields are ok, flse otherwise

function checkAll()
{
	n = checkName();
	p = checkPass();
	m = checkMail();
	a = checkAge();
	
	// if all boolean values are true return true
	return n && p && m && a;
}