Javascript Validate Name Field

Here is a simple tutorial on how to use Javascript to validate a form's name field. In this tutorial I'll show how to display the error beside the name field rather than pop-up the error message using the alert function. The error will display stating there is no name in the name field (I use a username field; however, the code can easily apply to a name field) in the error region when the user clicks on the submit button. When the user enters a name in the name field and then resubmits the error is no longer displayed.

Here is the HTML form:

<form name="register" method="POST" action="connect2.php" onsubmit="return checkWholeForm(this)">
<fieldset>
<div id="usernameField"><label style="padding-left:20px;" for="username">username:</label><input type="text" name="username" id="username" size="30" maxlength="45" /><span id="errorMesUsername"></span></div>
<div><label style="padding-left:20px;" for="pass">password:</label><input type="password" name="pass" id="pass" size="30" maxlength="45" /></div>
<label for="email">email:</label><input type="text" name="email" id="email" size="30" maxlength="45" /><br />
</fieldset>
<input type="submit" value="submit" name="submit" />
</form>

Basically, when the user clicks on the submit button the browser is expecting some return value from the checkWholeForm() function. The word 'this' is referring to the form as it's an object. In other words, 'this object' is the form. Notice There is a span section beside the username's input field.

<span id="errorMesUsername"></span>

There is nothing displayed to the username when the form is opened as this is where Javascript will return the error message if there is no name entered in the field.

VALIDATE THE FORM USING JAVASCRIPT FUNCTION

Here is the Javascript function for checkWholeForm():

function checkWholeForm(theForm) { with(theForm) { checkUsername(username.value); } return true; }

Notice the above uses a Javascript with() function. All this is saying is that all properties within the curly brackets {} will use the 'theForm' object. In other words, this 'username' is the property of 'theForm' object. The 'username' is the value of the 'name' attribute in the input tag as follows:

<input type="text" name="username" id="username" size="30" maxlength="45" />

If we chose not to use the with() function then we could write the checkWholeForm(theForm) as follows;

function checkWholeForm(theForm) {
checkUsername(theForm.username.value);
return true;
}

If we were to create additional validations such as for the password field and use the with() function then we could write the checkWholeForm(theForm) as follows:

function checkWholeForm(theForm) {
with(theForm) {
checkUsername(username.value);
checkPassword(pass.value);
}
return true;
}

The 'pass.value' is passing the value of the input of the password field to the checkPassword() function. The 'pass' is the value of the 'name' attribute of the 'input' tag. This function is incomplete as it will eventually be validating the password using PREG (Perl Regular Expressions).

function checkUsername (usernameVal) {
this.errorMes = document.getElementById("errorMesUsername");

var error = "";
if (usernameVal == "") {
error = "You didn't enter a username.n";
this.errorMes[removed] = error;
} else if (this.errorMes[removed] != "") {
this.errorMes[removed] = "";
} else {
return true;
}
}

DISPALY ERROR MESSAGE IF NO NAME IS ENTERED

The first line with 'this.errorMes' is simply creating a local variable. You could create a variable as 'var errorMes' instead. I program primarily in PHP so I'm used to using the term 'this' when referring to objects. We are getting the element by the id's value. In other words, the span tag's attribute 'id' has a value of 'errorMesUsername'. The span tag as you will notice is immediately after the input tag of the user field. This is where the error will display if the user did not enter any value in the user field. The reference to this DOM will be used later in the conditional statements.

Then in the next line we make the variable 'error' equal to nothing in case there is a previous value attached to it. Then we check for some conditions. Since this function (i.e. checkUsername()) is checking to see if the user entered any text the first conditional statement is "if (usernameVal == "")". Don't forget the double equal (i.e.'==') signs for conditional statements. This is different than assigning a value to variable where you only need one equal (i.e.'=') sign. If it turns out that the user did not enter any text in the username field then we assign the value of variable 'error' which equals "You didn't enter a username.n" to be placed within the span tag (i.e. innerHTML) where the attribute 'id' equals 'errorMesUsername'.

DELETE ERROR MESSAGE IF NAME IS ENTERED

The second conditional "else if (this.errorMes.innerHMTL != "")" is checking to see if there is any value within the span tag. In other words, if there is any error displayed. We need this conditional when the user then enters a name in the field after reading the error message and then resubmits the form. To further explain, if the condition 'usernameVal == ""' returns false or, in other words, if the there is now some text that was entered by the user in the name field then go to the next conditional which is where we are at. Since there is not some entered text in the name field we need to check to see if there is an error displayed in the span tags and if there is then we need to delete it (i.e. not display it). We do this by assigning the value of the span tag to equal to nothing with this line 'this.errorMes[removed] = ""'.

As an extra precaution could write this "another term, although" as ?else if (this.errorMes [removed]! =

Just as a note we could do the javascript function onchange () are used instead of this conditional statement. Onchange () function checks whether the user's letter to begin any text in the Name box. Once the user then will we be any text value to another function which can return the letter to begin the user base.

The last 'else' conditional is simply a catchall in case the other conditions don't pass for whatever reason.

So the entire Javascript code looks like:

function checkWholeForm(theForm) {

with(theForm) {
checkUsername(username.value);
}

return true;
}

function checkUsername (usernameVal) {
this.errorMes = document.getElementById("errorMesUsername");

var error = "";
if (usernameVal == "") {
error = "You didn't enter a username.n";
this.errorMes[removed] = error;
} else if (this.errorMes[removed] != "") {
this.errorMes[removed] = "";
} else {
return true;
}
}

This is a basic example of Javascript validating a name field. We'll go into more validation checks for the form's fields in upcoming tutorials.

An Insight into Custom Web Development

With advanced technology, requirements, based on the Web and desktop applications and technology solutions, ready to give them a longer shelf life, so that the progress of your business. They have to maintain / support and create business value.

To this end, the establishment of a professional team, cross-industry experience and technical ability is extremely important. Together, they find the best technology, the best way to reduce costs and streamline business processes, and gain business advantage.

?

Some web development main features are as follows:

• Developing and marketing products and services in an efficient manner
• Reduction of administrative and other costs
• Providing better customer service & abet business partners and employees
• Getting a higher Return on Investment (ROI)

With Custom Web Applications, the following things can be done easily.

• Project Management
• Project Life Cycle
• Configuration Management
• Change Control
• Quality Assurance & Testing
• Technology and Manpower evaluation
• Systems Analysis and Design
• Quick Prototyping
• Requirements Analysis
• Requirements Definition
• Project Plan
• Application Development
• Providing Test Codes
• Application Support & Guidance

Custom Web Development for some of the basic skills that are necessary, may be summarized as follows:

• Programming Languages: The major programming languages include C, C++, Java, Cold Fusion
• Application Development: Application is developed with Java, VB 6.0 and VB.NET
• Internet Technology: The Internet Technology that are used include the following:
  • Microsoft Centric: ASP, VBScript, COM, DCOM, Microsoft’s ASP.Net Technologies, Microsoft Transaction Server, Microsoft Site Server, Microsoft Content Management Server, Microsoft Commerce Server.
  • Other Technologies: CGI/Perl, PHP, WEB Logic, JavaScript, XML, XSL
• Database Tools: The database tools which are required for custom web applications include MS-SQL Server 7.0/2000, MS-Access, MySQL, and ORACLE - 9i
• Designing Tools: The basic designing tools which are required may be summarized as the following: Macromedia Director, Flash, Dreamweaver, Gif Animator, Adobe Photoshop, Adobe Acrobat, Illustrator, SMIL, 3D MAX, HTML, DHTML, Microsoft Front Page
• Operating Systems: UNIX, LINUX ES 3.0, Windows Server 2003, XP Professional serves as operating systems.
• Web Server: The major web servers include Apache 1.3, IIS 5.0 and IIS 6.0

Custom Applications Desktop:

Custom desktop applications ready to work with MS SQL2000, and Microsoft's SQL 7.0 and MS Access 2000 (and above) is basically a department or unit's internal use. They need regular server, and based on the window.

The main features of the desktop applications are the following:

• Customized
• Fast
• High efficiency
• A secure modes of data and information exchange
• Increase the user efficiency

The custom web development services provided by us are at par with the best in the industry.