JavaScript

123K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Share tech news, updates, or what's on your mind.

Sign up to Post

Html Form is the main way for users to interact with server side. It can bring a lot of functionalities to web sites such as searching, data storing and different kinds of calculations. However, page involving user inputs also implies users can do something to your page. The page would not know what data the user would give and unsuitable and unexpected data could bring undesired behaviors to the program, poor program could even crash with inappropriate data. As a result, the idea of input checking and validation is important if user input is involved.


The idea is to check if the user inputs is in the expected type or format before actual computation. And if data is not appropriate, data submission can be rejected to program misbehave. There are two ways of checking, client side and server side. Client-side checking is the first line of defense, usually Javascripts is called when the user submit the form with the event trigger onsubmit.

 
<form method="POST" action="mysearch.php" onsubmit="return validateForm(this);">

Open in new window


with this simple checking function

 
 
function validateForm(form)
{
	var isvalid = true;
	
	if(form.inputfield_name.value == "")
		isvalid = false;
	
	if(form.inputfield_phone.value == "")
		isvalid = false;
	
	if(form.inputfield_secret.value == "")
		isvalid = false;
	
	return isvalid;
}

Open in new window



Notice the onsubmit=return validateForm(this);? The page will try to call the validateForm() javascript function, which checks…
1
LVL 49

Expert Comment

by:Roonaan
Hi,

Nice article. A small upgrade to the code however might be to give users some feedback:

function validateForm(form)
{
      var errors = [];
      
      if(form.inputfield_name.value == "") {
            errors.push("Please enter a name");
      }
      if(form.inputfield_phone.value == "")
            errors.push("Please enter a phone number");
      }
      
      if(form.inputfield_secret.value == "")
            errors.push("Please enter a secret");
      }
      
      if(errors.length > 0) {
           alert("There where several problems while validating your request: \n- " + errors.join("\n- "));
           return false;
        }

      return true;
}

Also the article might give some pointers to validation frameworks used by dojo, jQuery, spry, etc.

Kind regards

Arnoud
0

JavaScript

123K

Solutions

42K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.