How To Validate HTML Form Using JavaScript

In the previous post, I have written about HTML forms. So you know how to create an HTML form but do you know how to validate it? Validation basically means to check if the the form information is valid.

One of the example would be to check if the user has left a required field empty. If he has left the field empty then the user shouldn’t be allowed to submit the form. If the user submits the form by keeping a required field empty then we’ll alert the user with a message and shift the user’s focus or cursor to the empty field.

Suppose we have a simple form which asks the user to enter the first name and last name. The code for the same is given below. We have added the submit button here using the input tag with type as submit.

I assume you don’t need any explanation for the HTML code. Once we have the HTML form ready we’ll create the JavaScript function. Given below is the code for JavaScript function which we’ll use to validate the given form.

We have written JavaScript code inside the script tags. The code contains a JavaScript function called validateForm(). Inside this function we have two parts. First part is for fname and the second part is for lname.

In the first part we created a variable x. This variable x points to document > yoform > fname. Then we check if value of x is null or an empty string. If its null or empty then we’ll alert the user by a message and then move the control or focus of the user to x.

Here x is basically the input field called fname inside yoformwithin the document. (document.yoform.fname). So when user leaves the fname field empty and hits submit, he’ll be alerted and the fname field will be focused upon. The same concept is used for second part.

Putting it together

Use the two codes given above in one single HTML file and you’re good to go. You can find the live form here. Try to submit the form keeping the fields empty and you’ll see how it works.

I hope this was helpful. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Creating Form, Radio Button, Checkbox and Dropdown in HTML

In this post we’ll see how we can create forms in HTML. The forms can be used to get information from the users. And that information can be of different types.

So we can create simple text areas, radio buttons, check boxes and drop down menus to get information from the user. This information which we will get from the HTML form can be processed later on with programming languages like JavaScript, PHP, etc.

I’ll show you how to use that information using JavaScript and PHP in my upcoming posts. But for now, lets just create the form without worrying about the functionality.

Creating A Simple HTML Form

To create form you’ll have to use the form tag in HTML. Inside the form tags you can create an input field using the input tag. Now the input can be of different types. For this example, we’ll use a simple text input.

Enter Country:

Explanation – We have used form tag to create an HTML form. We have used name, action and method as form attributes.

  1. The attribute name defines the name of this form.
  2. The attribute action defines the file which the browser should open when the form is submitted.
  3. The attribute method defines the way in which the information should be sent.

Just ignore the form attributes for now. We’ll look into that in another post. Inside the form tags we have used input tag. The input tag defines an empty field. We have used two attributes with input tag.

  1. The type attribute defines the type of input.
  2. The name attribute defines the variable name. name=”abc” is almost same as $abc = <user input> or String abc = <user input>. I hope you get the idea.

Password Field

Instead of using simple input box, we can use a special type of input box for Passwords. In this way the password will be hidden when entered. You have to change the type to password to create a password field.

Enter Password:

Radio Buttons

Radio buttons are useful when you want the user to select one option from many. For example, Radio buttons can be used to get information about gender of the user. The user can choose only one option – male or female.

Male
Female 

When we type name=”sex” value=”male”, it is almost same as saying sex=”male”. Here we cannot select both radio buttons because there is only one name but two values. And name can only have one value at a time.

But if these two radio buttons have different name attribute then you’ll be able to select both radio buttons. You can see the live example below.

Male
Female 

Check Box

Like radio buttons, you have something called as Check box in HTML. Using check box you can allow user to select multiple options from the list.

Which languages do you know?
PHP
JavaScriptUse the same name attribute for a list of check box. This is like having a box called “mybox” and putting all the selected items into “mybox”. Now when we open the box called “mybox”, you’ll be able to retrieve all the items inside that box.

Drop Down Menu

You can create a drop down menu using select and option tags. Suppose you want the user to choose from Windows, Linux, Mac. You can create a drop down menu for that using the following code –

The concept is almost the same. The value of selected option will be set to the name of menu. In this case, if we select Linux from the drop down then variable OPSYS will be set to LIN as follows: OPSYS=”LIN”.

I hope this was helpful. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.

Using Cascading Style Sheet In HTML

Cascading Style Sheet is something which you can use to style up your HTML documents. CSS comes in three types – Inline CSS, Internal CSS and External CSS. We’ll cover all these types in this post.

We will use basic CSS styles like background-color, font-family, font-size, border, padding, margin. We’ll not go into detailed explanation of how these properties work. For now, we’ll just focus on how Inline, Internal and External style sheet works.

Inline CSS

Inline CSS is basically the styles which you can use inside the tag without any kind of selector or hook. For now just ignore the words like selector. All you need to know is that Inline styles are used with the help of style attribute in the HTML Tag. Check the example given below.

Using CSS in HTML

This is a simple example of Inline CSS. In the code given above we have applied Inline styles to div tag of HTML document. So everything within the opening div tag and closing div tag will acquire the properties of style attribute.

Internal CSS

If we had to use the same styles as Internal CSS then we’ll have to make some changes and move the styles into the header of HTML Document. Also the role of selector or hook comes into picture now. First check the code given below with the result.

Using CSS in HTML

The output would be same because we’re just switching the ways to use CSS and not changing the actual code. So what is really different in Internal CSS ? Let’s understand by looking at the changes which we made between the two codes given above.

As you can see, we have used a class selector (class begins with .) named .mystyle and added all the styling properties inside curly brackets which we had previously used inside style attribute.

Then we simply removed style attribute from div tag and added the class selector with label mystyle. So basically the browser understands div element should contain the properties of mystyle class. That’s how you can use Internal CSS.

So in Internal CSS, we define the class and group the styles inside the class. Then we can apply all these styles to any HTML element by adding that particular class label to that element.

External CSS

In External CSS, everything is almost the same but we just have to make a completely separate CSS file for storing all the style sheet information. In this way if you have about hundreds of HTML pages then you can simply change their style information by accessing one single file. So in short, one CSS file to style up many HTML pages.

Now let’s create two files. One is style.css and other is test.html. The code for these two files is given below. Make sure you put these two files in the same folder to get it to work.

Style.css

Test.html

The result remains same. But for External CSS, we have created two files. One file contains the styling information while the other file is the main HTML page.

In the HTML page, we just replaced the style tag with link tag. So basically instead of filling the page with styling information, we are linking the file to get the styling information.

Here the link tag will tell the browser to use stylesheet information from style.css which is of the type text/css and the relation is stylesheet.

I hope you get the idea of Inline, Internal and External CSS. Thanks for reading and do subscribe to the blog feed for more amazing posts. You can find the subscription box below.