Loading...

Contact

Blog

Top Stories

Descover New Ideas!

How to Validate HTML form using Jquery

09 Nov 2016 by Ravi Sah
How to Validate HTML form using Jquery

Jquery Validation is simple, it doesn't have to be a scary or time-consuming process. This tutorial shows you how to set up a basic form validation with jQuery. Here i am going to use jQuery Validation Plugin, it makes simple clientside form validation easy, whilst still offering plenty of customization options.

Form View

Step 1: Include jQuery

First, we need to include jQuery as the validation plugin is currently only compatible with jQuery versions lower than 2.0.

Create a new HTML file named index.html and include jQuery before the closing tag:


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Step 2: Include the jQuery Validation Plugin

Include the plugin after jQuery, or you can download them in your folder and call them from there:


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>

Step 3: Create a HTML form

Now you need to create a form in html, For the mail sending we want to collect the following user information:

1. Name
2. Email
3. Phone Number
4. Message

So, let’s create our form containing these input fields:


<div id="contact">
	<h4>Say Hello!</h4>
	< form id="form" action="#" method="post" >
		< input type="text" name="name" placeholder="Name..." />
		< input type="text" name="email" placeholder="Email id..." />
		< input type="text" name="phone" placeholder="Phone..." />
		< textarea name="message" placeholder="Message..." ></ textarea >
		< button value="Submit" > Submit < button >
	</ form >
</div>

Step 4: Create Style for the form

You can create style for the form to look good and attractive, here it goes:


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
	<style>
	h4 {
		color:#001C27;
		font-size:22px;
		font-weight:bold;
		margin-bottom:12px;
		margin-top:0;
		text-transform:uppercase;
	}
	input, textarea, button, label {
		display:block;
	}
	input, textarea {
		margin-bottom: 10px;
		display: block;
		border-radius:4px;
		border:1px solid #a5a5a5;
		font-family:arial;
		font-size:14px;
		width:200px;
		color:#797C80;
	}
	input:focus, textarea:focus {
		background:#f3f3f3;
	}
	input {
		height:40px;
		padding:0 10px;
	}
	textarea {
		height:100px;
		padding:10px 10px;
	}
	input.error, textarea.error {
		border: 1px solid red;
	}
	label.error {
		color: red;
		font-size:12px;
		margin-bottom:10px;
	}
	input.valid, textarea.valid {
		border: 1px solid green;
	}
	.ok {
		display:none !important;
	}
	button {
		background:#BB002B;
		padding:10px 40px;
		color:#fff;
		border:2px solid #BB002B;
		border-radius:4px;
		font-size:14px;
		font-weight:bold;
		margin-top:20px;
		cursor:pointer;
	} 
	button:hover {
		background:transparent;
		color:#BB002B;
	}
	#contact {
		margin:0 auto;
		padding:40px;
		border:1px solid #a5a5a5;
		width:222px;
	}
	</style>
</head>

Step 5: Create the Validation Rules

Finally create validation rules for the form like this, its easy:


<script>
	$(function(){
		$("#form").validate({
		rules: {
			name: {
				required: true,
				minlength: 3
			},
			phone: {
				required: true,
				number: true,
				minlength: 6
			},
			email: {
				required: true,
				email: true
			},
			message: {
				required: true,
				minlength: 5
			}
		},
		messages: {
			name: {
				required: 'Name is required',
				minlength: 'Minimum length: 3'
			},
			phone: {
				required: 'Phone Number is required',
				number: 'Invalid phone number',
				minlength: 'Minimum length: 6'
			},
			email: {
				required: 'E-mail is required',
				email: 'Invalid e-mail address'
			},
			message: {
				required: 'Messaage is required',
				minlength: 'Atleast say HELLO!'
			}
		},
		success: function(label) {
			label.html('OK').removeClass('error').addClass('ok');
			setTimeout(function(){
				label.fadeOut(500);
			}, 2000)
		}
		});
	});
</script>

That’s it, you’re done! Now you have an idea how to set up form validation with jQuery. Thank you!! Hope you liked it.

Download Button
Continue Reading...


3 Most Popular SEO Tools

14 Oct 2016 by Ravi Sah

Hi Guys this is ravi & i want to present you some of the best SEO Tools that will help you to save money and time. Even if they are not free, I can assure you that every rupee spent will have huge payback, and you can normally see some of your important things absolutely free.

Here are those tools...

1. Semrush

Semrush

Semrush is most popular now days, Its a tool that will bring some strong analytic reports about your domain, niche or keyword. The awesome part in it is you can use it to spy on your competitor. It have a lot of interesting and useful features like Back-links, Organic Research, Advertising Research, Keyword Research, Site Audit and many more.

It only cost 100$ / month ! not bad. I am using this tool from the beginning of website. Its dashboard is very easy to use with a simple & smart design.

2. Ahrefs

Ahrefs

Ahrefs is similar to Semrush but it doesnt have the keyword research tool, Instead of it provides a more in-depth analysis about domain power and back-links.

You can use this tool mainly for analyzing for expired domains. it's price is same as Semrush.

3. Google Analytics

Google Analytics

Google Analytics is most common SEO tool provided by Google, its absolutely Free. If you are into internet marketing for some time there is a high chance that you have been used this tool at least once.

The most exciting thing about this tool is that it delivers data about how the visitors are interacting with your website in a very unique way. You can get most of your SEO requirement's here for free of cost.

Hope you liked this Post. If so please Comment & Share. Thank You!!

Continue Reading...


How to use Google Drive as a Free Web Hosting

11 Aug 2016 by Ravi Sah

Website's are in boom now days in the world. Many people are looking for free web hosting services, there are several web hosting companies that provide free web hosting.

Google also published this feature for free and easy to use.

All you need to do is store your HTML, CSS, JavaScript and image files into a public folder and then set the folder's sharing settings to "Public on the web", so everyone can access it. I believe that using Google Drive as a free web hosting should be more reliable since your site will get served through Google's own data centers. you can use it for showing website demo's to your clients.

Here i am going to show you some easy steps to host your website in Google Drive...

Step 1

Simply type www.google.co.in/drive to your browser url bar and hit enter, then click go to google drive button in the center of the web page.

Google Drive

Step 2

Now Login to your Google Drive account with your gmail id, Now click on New Button on your left side and select folder option then type your folder's name and hit create button, Now you can see the folder is created.

Google Drive Google Drive

Step 3

Right click upon your created folder and select share option, then go to the Advanced link down, please do not forget to copy your url id, now you can see there is a change link for change the viewing property of your folder click on it.

Google Drive Google Drive Google Drive

Step 4

Link Sharing window is there select first option that is On - Public on the Web, now save it and press done button. You are so close to finish this task.

Google Drive Google Drive

Step 5

Now DoubleClick on your Folder, then right-click and upload your html, css, js files and folder's wait for the uploading and you can also upload by dragging and dropping files your are almost done.

Google Drive Google Drive

Step 6

Finally type www.googledrive.com/host/your copied id here, then hit enter.

Google Drive Google Drive

Congrats you have done really good, you can see your website is running. You can add or edit your website directly from your Google drive, and yes can also use www.bitly.com for making your URL short.

Thank you very much for reading.

Continue Reading...


3 Reasons why you should focus on improving your website speed

17 Jul 2016 by Ravi Sah

A website has become a face value for any organization. With the digital intelligence throbbing at the hearts of your target audience and turning them into tech savvy, it is essential for you to work on your website right now. A website is not just a layer of designs and bundle of landing pages, but is the core of any product and service that you want to deliver to your potential buyers.

Website Speed

As per reports, it has been observed that a website leads to 7% of the conversions. So, now you know why is it most essential for you to build on a better website.

But hold on! Do you think that only building on a user-friendly website is enough? Think again.

Let me share a few stats with you regarding how a 1-second delay in a website loading can affect your business.

11% fewer page views

16% decrease in customer satisfaction

7% loss of conversion

Amazon found these stats to be true and noticed increased revenue of 1% for every 100 milliseconds improvement to their site speed. Similarly, Walmart tracked that there was an increase in conversion rate by 2% for every 1 second of improvement on the website.

As a business owner, you need to know where your consumers are. But what if consumers know your business and what you can offer, but they can’t reach you? That is one of the risks when your website is running slow.

Though it has been observed by Radware that almost 22% of the website speed has improved this year, but it's high time you should know why it is important to focus on to the speed of your website. And I'm going to tell you just that:

1. Customers look out for quick solutions

When you create your own website, you need to know that customers aren't online just to discover what you're offering in the marketing. They are seeking a solution that instantly reliefs them from the pain they are suffering from. If they by chance hit your website to solve their pain, you'll have to make sure that the solution is delivered to your target audience faster. If they encounter a slower process, they'll be compelled to move to your competitors. Therefore, if you work slow there are higher chances of you loosing a conversion.

2. Quick page loads make consumers loyal towards your brand

By building a site you are giving your business the chance to tell buyers why they ought to trust you. Trust me or not, most people will look through the web for an item or service before the purchase to check the validity first. Hence, the instantaneous characteristic of your website will add to your brand value. As per Akamai, 52% of online shoppers say quick page loads are important for their loyalty to a site.

3. Chances of knowing your organization increases

When a visitor is stuck on a single webpage to load, you are simply losing the chance to make him aware of other services that you offer and he might be interested in. The chances of exploring other pages decreases and page views are reduced. This will definitely lead to loss of business. So, make websites that loads in a click and swiftly delivers solutions to the market.

Clearly, speeding up your website is critical - not just for ranking well with Google, but to keep your bottom-line profits high and growing.

How do you plan to speed up your website? Share your thoughts in the comment section below.

Continue Reading...


10 Awesome Web Typography Combination

16 Jun 2016 by Ravi Sah

First of all let me introduce you about Web Font and how it used in website. Web typography combination represents to the use of fonts on the World Wide Web (www). Web font's allows us to use font like which is not installed in your system. Now days Google Font is in craze, it allows you to integrate more then 2 font's in your website or application. It is very easy to use in your website, google font can be added by 3 ways in your website which are given below. Suppose i want to add PT Sans Font in my website then here it goes...

1st way to put it in your html page under head tag, for example


<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
</head>

2nd way to put it in your CSS file, for example


@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

3rd and last way to use it is by Java Script, for example


<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'PT+Sans:400,400italic,700,700italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

Now just integrate the font family into your CSS file like given below and its done :)


body {
  font-family: 'PT Sans', sans-serif;
}

Top 10 font Combo's

Typography is an art and, in web there are thousands of fonts available, it is obviously difficult for non-designers to find the perfect font combination. Here i am telling you some useful font combination's for websites and applications with demo.

1. Montserrat + Open Sans

Font family for Montserrat font is 'Montserrat', sans-serif and font family for Open Sans font is 'Open Sans', sans-serif

Montserrat + Open Sans Combination

2. Roboto + Roboto Slab

Font family for Roboto font is 'Roboto', sans-serif and font family for Roboto Slab font is 'Roboto Slab', serif

Roboto + Roboto Slab Combination

3. Raleway + Roboto

Font family for Raleway font is 'Raleway', sans-serif and font family for Roboto font is 'Roboto', sans-serif

Raleway + Roboto Combination

4. Oswald + Roboto

Font family for Oswald font is 'Oswald', sans-serif and font family for Roboto font is 'Roboto', sans-serif

Oswald + Roboto Combination

5. Playfair Display + Open Sans

Font family for Playfair Display font is 'Playfair Display', serif and font family for Open Sans font is 'Open Sans', sans-serif

Playfair Display + Open Sans Combination

6. Lato + Merriweather

Font family for Lato font is 'Lato', sans-serif and font family for Merriweather font is 'Merriweather', serif

Lato + Merriweather Combination

7. Oxygen + Source Sans Pro

Font family for Oxygen font is 'Oxygen', sans-serif and font family for Source Sans Pro font is 'Source Sans Pro', sans-serif

Oxygen + Source Sans Pro Combination

8. Philosopher + Muli

Font family for Philosopher font is 'Philosopher', sans-serif and font family for Muli font is 'Muli', sans-serif

Philosopher and Muli Combination

9. Ubuntu + Cabin

Font family for Ubuntu font is 'Ubuntu', sans-serif and font family for Cabin font is 'Cabin', sans-serif

Ubuntu and Cabin Combination

10. Open Sans + PT Sans

Font family for Open Sans font is 'Open Sans', sans-serif and font family for PT Sans font is 'PT Sans', sans-serif

Open Sans + PT Sans Combination

There are manny more font combination's. You can choose from these also and can reverse them. By putting together essential visual components, you can built a great personality for your brand.

Continue Reading...


Ready to discuss your project?

Close Free Consuting Form
Responsivness

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Detail