Introduction
This is Part 1 of the basics of the JavaScript series. This article explains some of the basic concepts of JavaScript.
The following are the topics that we will discuss today.
- Introduction
- Use of JavaScript
- The need for both client-side and server-side validation
- Advantages of JavaScript
The following are the two types of web pages,
- Static Web Pages.
- Dynamic Web Pages.
HTML is used for creating static web pages. These pages are delivered to the users exactly as they are stored and do not respond to user inputs.
On the other hand, two types of scripting languages can be used to create dynamic web pages.
- Client-side- JavaScript and Visual Basic Script.
- Server-side- PHP, Perl.
Both of these scripting languages can be used to create dynamic web pages. The client-side scripts are executed by the web browser, in other words, at the client side, whereas the webserver executes the server-side scripts.
Use of JavaScript
In SQL Server, I have a table with the following columns.
![]()
Query used
CREATE DATABASE db_BasicsOfJs
USE db_BasicsOfJs
CREATE TABLE tblRecords
(
Id INT IDENTITY PRIMARY KEY,
Name NVARCHAR(30),
Email NVARCHAR(100)
);
SELECT * FROM tblRecords
Open Visual Studio and create an empty MVC web application.
![]()
Click OK.
Add ADO.NET Entity Model
![]()
![]()
Click OK.
![]()
Click Next.
Add new connection
![]()
Click OK.
![]()
Click Next.
![]()
Select the table and click Finish.
![]()
Add a controller
![]()
Click Add.
![]()
Click Add.
Now in the Models folder, add a class file in which we will customize the auto-generated properties.
![]()
Add the class file, mark the class as partial, and change the class name to tblRecord.
using System;
namespace BasicsOfJavaScriptPart1.Models
{
public partial class tblRecord
{
}
}
Write the following in the tblRecords class.
using System;
using System.ComponentModel.DataAnnotations;
namespace BasicsOfJavaScriptPart1.Models
{
//use MetadataType attribute to pass the Metadata in tblRecord class
[MetadataType(typeof(RecordsMetaData))]
public partial class tblRecord
{
}
//create a MetaData class which will be used to customize the auto-generated properties of tblRecord class
class RecordsMetaData
{
//mark both the properties as required
[Required]
public string Name
{
get;
set;
}
[Required]
public string Email
{
get;
set;
}
}
}
Build the project and run.
Now this application requires to capture the data and store it in the database table.
![]()
Click on the Create New link.
![]()
Click the Create button.
![]()
Look at the preceding error message we got. We marked both fields as required, so we get a validation message.
On the other hand, if we pass valid data,, the records will be stored in the database table.
![]()
But we currentlye don't have JavaScript anywhere in our web application.
![]()
Here we are validating our form on the server side. So every time we click the create button, the request is sent to the server over the network; the server processes it and notices that the form fields are blank then it sends the response message back to the client.
Now let's say, for some reason, the web server is busy, and the user must wait a few seconds to get the response message from the server.
Let's include latency in our application by making the HttpPost create action method sleep for 5 seconds.
public ActionResult Create([Bind(Include = "Id,Name,Email")] tblRecord tblRecord)
{
System.Threading.Thread.Sleep(5000);
}
Run the application and navigate to the create view.
![]()
Click the Create button.
When the user clicks the create button, they must wait for at least 5 seconds before the server sends back the response.
Validation check using JavaScript
We can do the validation check without posting the request to the server. Don't you think it would be much better and the application more responsive?
Let's see how to validate the user input using JavaScript.
The introduction shows that the client browser executes JavaScript. So, the browser will execute the referred JavaScript function whenever we click the create button.
In the Create.cshtml, write the following JavaScript function,
< script type = "text/javascript" > function myfunction()
{
var Name = document.getElementById("Name").value;
var Email = document.getElementById("Email").value;
var isTrue = true;
if (Name == "")
{
document.getElementById("nameError").innerHTML = "Name field is required";
isTrue = false;
} else {
document.getElementById("nameError").innerHTML = "";
}
if (Email == "")
{
document.getElementById("emailError").innerHTML = "Email field is required";
isTrue = false;
} else {
document.getElementById("emailError").innerHTML = "";
}
return isTrue;
} < /script>
Pass the function name to the submit button as in the following:
<input type="submit" value="Create" class="btn btn-default" onclick="return myfunction()" />
![]()
So, now the form validation is happening on the client side.
The following describes why we need both Client-side and Server-side validation :
- Client-side validation can be easily bypassed by disabling JavaScript on a client browser. If JavaScript is disabled and we don't have server-side validation, there could be a chance of storing invalid data, or there could be even security vulnerabilities.
- Client-side validation provides a better user experience since it reduces the unnecessary round trips between the client and the server.
- To prevent the form from becoming vulnerable to tools like Fiddler, we still want to validate the form on the server side before saving it. So, server-side validation should always be there, even, if we have client-side validation.
Advantages of using JavaScript
- JavaScript can validate form fields, such as checking for blank fields before submitting the form to the server.
- With JavaScript, partial page updates are possible, commonly known as AJAX.
- JavaScript can be used to handle events.
- It can be used to gather browser information such as name and version.
Summary
In this article, we learned about some of the basic functionality of JavaScript.
I hope you like it.
Thank you.