Make text appear entirely inside div

I'm trying to have my text inside the 'container' div show up entirely but it seems to get cut off? .. It works if there is only a bit of text but if the text is more than 1 page it will cut it off.. Also the page seems to load very long because of the background image (defined in stylesheet.css) How do I fix this the best ? Thanks in advance!

I'm trying to have my text inside the 'container' div show up entirely but it seems to get cut off? .. It works if there is only a bit of text but if the text is more than 1 page it will cut it off.. Also the page seems to load very long because of the background image (defined in stylesheet.css) How do I fix this the best ? Thanks in advance!

* {
  box-sizing: border-box;
}

@font-face {
font-family: 'zcool';
src: url('fonts/zcool.ttf') format('ttf');
local: url('fonts/zcool.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}

html,
body {
height: 100%;
width: 100%;

}

body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}

@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bgm.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}

ul#horizontal-list {
list-style: none;
}

ul#horizontal-list li {
display: inline;
}

ul {
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: center;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: red;
}

.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}

.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}

.header {
background-image: url(img/j.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}

@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.header {
background-image: url("img/johnswork-mobile.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}
}

.body {
height: 100%;
width: 90%;
margin: auto;
padding: 0;
border: 0;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;

/*background-color: grey;*/

}

.johnswork {
background-image: url(img/johnswork.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 20%;
width: 100%;
margin-bottom: 5%;
}

.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(162, 27, 27);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}

@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(27, 125, 162);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
}

.social {
margin: auto;
display: flex;
justify-content: center;
}

.me {
float: left;
margin-right: 3%;
height: 100%;
}

.footer {
height: 50px;
width: 72%;
background-color: black;
color: white;
vertical-align: middle;
margin: auto auto 50px;
}

#copyright {
display: table;
}

#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>

<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!--<link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" />-->
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>

<body>

&lt;nav class="navbar"&gt;

	&lt;ul&gt;
		&lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;

&lt;/nav&gt;


&lt;header class="header"&gt;

&lt;!-- background defined in stylesheet.css--&gt;
	
&lt;/header&gt;

	&lt;section class="body"&gt;
		&lt;section class="content"&gt;
		
		&lt;section class="johnswork"&gt;
		&lt;!-- background defined in stylesheet.css--&gt;
		&lt;/section&gt;
		
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.

		Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.

		Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.

		Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.

		Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
		
		&lt;/section&gt;
	&lt;/section&gt;

&lt;footer class="footer" id="copyright" style="text-align:center"&gt;
	&lt;div id="cpy"&gt;&amp;copy; DA COSTA JOAO (2019)&lt;/div&gt;
&lt;/footer&gt;

</body>

</html>


Download Files with Axios and Vue

Download Files with Axios and Vue

In this artilce, you'll learn how to download file using Axios and Vue with example

If you need to download image or any file from url or blob in Node.js, React.js etc then you can do it using Axios. We can also use get or post request for download file in Vue.js axios. it will also use with Laravel Vue download file.

As we know **Axios **is a very popular for http request. you can fire get, post, put etc request using Axios in Vue.js, Node.js, react js etc. But if you need same requirement to download file response from api and user to give download using Axios then how you can do that? I will help you to do file downloading using Axios.

You can see bellow peace of code for Axios request example:

axios({
    url: 'http://localhost:8000/api/get-file',
    method: 'GET',
    responseType: 'blob',
}).then((response) => {
     var fileURL = window.URL.createObjectURL(new Blob([response.data]));
     var fileLink = document.createElement('a');
  
     fileLink.href = fileURL;
     fileLink.setAttribute('download', 'file.pdf');
     document.body.appendChild(fileLink);
   
     fileLink.click();
});

You can also see full example with Vue.js here:

Make sure you need to create your local pdf file url or you can give any live url for download.

Let's see bellow code:

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How to Download File using Axios Vue JS? - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs=" crossorigin="anonymous"></script>
</head>
<body>
  
<div id="app">
   
  <button @click="onClick()">DownLoad</button>
  
</div>
  
<script type="text/javascript">
   
    var app = new Vue({
      el: '#app',
      methods: {
          onClick() {
              axios({
                    url: 'http://localhost:8000/my.pdf',
                    method: 'GET',
                    responseType: 'blob',
                }).then((response) => {
                     var fileURL = window.URL.createObjectURL(new Blob([response.data]));
                     var fileLink = document.createElement('a');
   
                     fileLink.href = fileURL;
                     fileLink.setAttribute('download', 'file.pdf');
                     document.body.appendChild(fileLink);
   
                     fileLink.click();
                });
          }
      }
    })
  
</script>
  
</body>
</html>

I hope it can help you...

Frontend vs Backend vs Fullstack Web Development - What should you learn?

Frontend vs Backend vs Fullstack Web Development - What should you learn?

Frontend vs Backend vs Fullstack Web Development - What should you learn? In Web Development, there's Frontend (JS, HTML, CSS), Backend (PHP, Node.js, DBs, ...) and Fullstack (Everything?) Development. What's the best one?

In Web Development, there's Frontend (JS, HTML, CSS), Backend (PHP, Node.js, DBs, ...) and Fullstack (Everything?) Development. What's the best one?
Limited Offer! Join the Full Node.js Course at 90% off: http://bit.ly/2O0oN6c
Exclusive Discount also available for these courses:

  • React.js: http://bit.ly/36Qm6ww
  • Angular: http://bit.ly/2X0yLZc
  • Vue.js: http://bit.ly/32xDUcj
  • MongoDB: http://bit.ly/34MsB1y
  • CSS: http://bit.ly/2NXtbCZ

A Guide To Compress And Upload Images In Laravel 5.8

A Guide To Compress And Upload Images In Laravel 5.8

If you wanted to compress image in laravel 5 application then you are a right place. I will guide you how to compress image before upload using intervention in laravel 5.8. We can easily image minify or image compression in laravel.

If you wanted to compress image in laravel 5 application then you are a right place. I will guide you how to compress image before upload using intervention in laravel 5.8. We can easily image minify or image compression in laravel.

Using intervention we can easily compress image of png, jpeg, jpg, gif, svg etc.

We will use intervention/image package for **compress **or resize **image **in Laravel 5.8. intervention provide a resize function that will take a three parameters. three parameters are width, height and callback function. callback function is a optional.

So here i write step by step tutorial of compress and upload image in Laravel 5.8. So just follow bellow step to create image **example **for your project.

Step 1: Install Laravel 5.8

In this step, if you haven't Laravel 5.8 application setup then we have to get fresh **laravel 5.8 **application. So run bellow command and get clean fresh Laravel 5.8 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Intervention Image

In second step we will install intervention/image for resize image. this package through we can generate thumbnail image for our project. so first fire bellow command in your cmd or terminal:

composer require intervention/image

Now we need to add provider path and alias path in config/app.php file so open that file and add bellow code.

<strong>config/app.php</strong>

return [
    ......
    $provides => [
        ......
        ......,
        'Intervention\Image\ImageServiceProvider'
    ],
    $aliases => [
        .....
        .....,
        'Image' => 'Intervention\Image\Facades\Image'
    ]
]

Step 3: Create Routes

In this step we will add routes and controller file so first add bellow route in your routes.php file.

<strong>routes/web.php</strong>

Route::get('resizeImage', '[email protected]');
Route::post('resizeImagePost', '[email protected]')->name('resizeImagePost');

Step 4: Create Controller File

Now require to create new ImageController for image uploading and resizeing image so first run bellow command :

php artisan make:controller ImageController

After this command you can find ImageController.php file in your app/Http/Controllers directory. open ImageController.php file and put bellow code in that file.

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Http\Requests;
use Image;
class ImageController extends Controller
{
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage()
    {
        return view('resizeImage');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImagePost(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $image = $request->file('image');
        $input['imagename'] = time().'.'.$image->getClientOriginalExtension();
     
        $destinationPath = public_path('/thumbnail');
        $img = Image::make($image->getRealPath());
        $img->resize(100, 100, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPath.'/'.$input['imagename']);
   
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $input['imagename']);
   
        $this->postImage->add($input);
   
        return back()
            ->with('success','Image Upload successful')
            ->with('imageName',$input['imagename']);
    }
   
}

Step 5: Blade and Create Upload directory

Ok, in this last step we will create resizeImage.blade.php file for photo upload form and manage error message and also success message. So first create resizeImage.blade.php file and put bellow code:

resources/views/resizeImage.blade.php

@extends('layouts.app')
   
@section('content')
<div class="container">
<h1>Resize Image Uploading Demo</h1>
@if (count($errors) > 0)
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
   
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    <strong>{{ $message }}</strong>
</div>
<div class="row">
    <div class="col-md-4">
        <strong>Original Image:</strong>
        <br/>
        <img src="/images/{{ Session::get('imageName') }}" />
    </div>
    <div class="col-md-4">
        <strong>Thumbnail Image:</strong>
        <br/>
        <img src="/thumbnail/{{ Session::get('imageName') }}" />
    </div>
</div>
@endif
   
{!! Form::open(array('route' => 'resizeImagePost','enctype' => 'multipart/form-data')) !!}
    <div class="row">
        <div class="col-md-4">
            <br/>
            {!! Form::text('title', null,array('class' => 'form-control','placeholder'=>'Add Title')) !!}
        </div>
        <div class="col-md-12">
            <br/>
            {!! Form::file('image', array('class' => 'image')) !!}
        </div>
        <div class="col-md-12">
            <br/>
            <button type="submit" class="btn btn-success">Upload Image</button>
        </div>
    </div>
{!! Form::close() !!}
</div>
@endsection

Ok, at last create two directory in your public folder (1)images and (2)thumbnail and please give permission to that folder and check....

I hope it can help you...

Convert SVG to PNG Using NodeJS & Sharp

Convert SVG to PNG Using NodeJS & Sharp

In this article, you'll learn how to convert SVG to PNG using NodeJS & Sharp

Introduction

Do you need to convert a SVG file to the Portable Network Graphic (PNG) format? This article will walk you through how to do that.

We'll use Node.js as our coding language of choice and the Sharp npm package to do most of the heavy lifting for us.

Install Sharp Npm Package

First, you need to install the npm package. You can install it with either the npm or yarn command below:

Npm

$ npm install sharp --save

Yarn

$ yarn add sharp

If everything went as planned, you should now have the Sharp npm package installed.

Convert SVG to PNG

Now we're ready to start writing some code and converting an image! Make sure you have a SVG file in the root of your project directory that we can play around with.

Using the Sharp npm package, here is the full code:

Node.js
 
const sharp = require("sharp")
 
sharp("file.svg")
  .png()
  .toFile("new-file.png")
  .then(function(info) {
    console.log(info)
  })
  .catch(function(err) {
    console.log(err)
  })

Let's break down each part of the code:

  1. First, we import the sharp npm package and hold it in the sharp variable.
  2. Then, we use the sharp package to read our file.svg file, convert it to a PNG and write the new PNG file to your directory with the .toFile() function.
  3. The sharp method is a promise and we use it to get the info for the file once it has been written to our directory.
  4. Last, we use .catch() method to catch and console.log() any errors.

When you run the code, you should get a similar output to this:

Output
 
{
  format: 'png',
  width: 2500,
  height: 527,
  channels: 4,
  premultiplied: false,
  size: 47194
}

You should also see the new PNG file in your project directory.

There are also additional options you can pass to the .png() method to alter the output image. These include the compression level, quality, colors, and more. You can check them out in their documentation.

Conclusion

Hopefully, this article helped you in your coding endeavors!

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

The Complete Node.js Developer Course (3rd Edition)

Angular & NodeJS - The MEAN Stack Guide

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

Best 50 Nodejs interview questions from Beginners to Advanced in 2019

Node.js 12: The future of server-side JavaScript

An Introduction to Node.js Design Patterns

How to Validate Phone Number with Javascript

How to Validate Phone Number with Javascript

The validating phone number is an important point while validating an HTML form. In this post we have discussed how to validate a phone number (in different format) using JavaScript

The validating phone number is an important point while validating an HTML form. In this page we have discussed how to validate a phone number (in different format) using JavaScript :

At first, we validate a phone number of 10 digits with no comma, no spaces, no punctuation and there will be no + sign in front the number. Simply the validation will remove all non-digits and permit only phone numbers with 10 digits. Here is the function.

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if((inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript phone validation-1

To valid a phone number like
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX
use the following code.

function phonenumber(inputtxt)
{
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if((inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - phone validation-2

If you want to use a + sign before the number in the following way
+XX-XXXX-XXXX
+XX.XXXX.XXXX
+XX XXXX XXXX
use the following code.


function phonenumber(inputtxt)
{
  var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
  if((inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Flowchart:

Flowchart : JavaScript - phone validation-3

Following code blocks contain actual codes for the said validations. We have kept the CSS code part common for all the validations.

CSS Code

 li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

Validate a 10 digit phone number

At first we validate a phone number of 10 digit. For example 1234567890, 0999990011, 8888855555 etc.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxxxxxxxxx] and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-all-numeric-validation.js"></script>
</body>
</html>

JavaScript Code

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if(inputtxt.value.match(phoneno))
  {
      return true;
  }
  else
  {
     alert("Not a valid Phone Number");
     return false;
  }
  }

Flowchart:

Flowchart : JavaScript - phone validation 10 digit

Validate North American phone numbers

Now, let's see how to validate a phone number, either in 222-055-9034, 321.789.4512 or 123 256 4587 formats.

HTML Code

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxx-xxx-xxxx, xxx.xxx.xxxx, xxx xxx xxxx] and Submit</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-international-format.js"></script>
</body>
</html>

JavaScript Code

function phonenumber(inputtxt)
{
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputtxt.value.match(phoneno))
     {
	   return true;      
	 }
   else
     {
	   alert("Not a valid Phone Number");
	   return false;
     }
}

Flowchart:

Flowchart : JavaScript - phone validation North America

Validate an international phone number with country code

Now, let's see how to validate a phone number with country code, either in +24-0455-9034, +21.3789.4512 or +23 1256 4587 format.

HTML Code

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>

<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx] and Submit</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="phonenumber(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="phoneno-+international-format.js"></script>
</body>
</html>

JavaScript Code

function phonenumber(inputtxt)
{
  var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if(inputtxt.value.match(phoneno))
     {
	   return true;
	 }
   else
     {
	   alert("Not a valid Phone Number");
	   return false;
     }
}

Thank you for visiting and reading !