Dynamic Phone Number Validator

Developer
Sdnyco
Size
4,254 Kb
Views
16,192
  1. Dynamic Phone Number Validator Previews
  2. Dynamic Phone Number Validator HTML Codes
  3. Dynamic Phone Number Validator CSS Codes
  4. Dynamic Phone Number Validator JS Codes

How do I make an dynamic phone number validator?

Dynamically validate international phone numbers (needs to include country code). Submission only possible when a valid number has been entered.. What is a dynamic phone number validator? How do you make a dynamic phone number validator? This script and codes were developed by Sdnyco on 23 November 2022, Wednesday.

Dynamic Phone Number Validator Previews
IQ Test

Dynamic Phone Number Validator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Phone Number Validator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,900,400italic);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css);
body { background: #B2675E; font-weight: 300; color: #f2e8dd; font-size: 2em; font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif; text-align: center;
}
::-webkit-input-placeholder { color: rgba(0, 50, 73, 0.4);
}
h2 { margin-top: 5%; font-size: 22px; font-weight: 300;
}
form { color: #003249; display: block; width: 700px; margin: 0 auto; margin-top: 5%;
}
form input { border: none; padding: 1em 1em;
}
form input[type="tel"] { background: #EBDCCB; position: relative; z-index: 100;
}
form input[type="tel"]:focus { background: #f2e8dd; outline: none;
}
form input[type="submit"] { background: #7D3238; font-weight: 800; color: white; margin-left: -10px; -webkit-transition: background .3 ease; z-index: 1; position: relative;
}
form input[type="submit"]:hover { background: #592328;
}
.sendApp:not(.sendApp--active) input[type='tel'] { transform: translateX(55px); transition: transform .3s ease; z-index: 100;
}
.sendApp:not(.sendApp--active) input[type='submit'] { transform: translateX(-50px); opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 1;
}
.sendApp input[type='tel'] { transform: translateX(0); transition: transform .3s ease;
}
.sendApp input[type='submit'] { transform: translateX(0); opacity: 1; transition: opacity .3s ease, transform .3s ease;
}
::-webkit-input-placeholder { color: rgba(0, 50, 73, 0.4);
}
:-moz-placeholder { /* Firefox 18- */ color: rgba(0, 50, 73, 0.4);
}
::-moz-placeholder { /* Firefox 19+ */ color: rgba(0, 50, 73, 0.4);
}
:-ms-input-placeholder { color: rgba(0, 50, 73, 0.4);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2><em>dynamic</em> phone number <em>validation</em></h2>
<form class="sendApp"> <input type="tel" value="" placeholder="+44" /> <input type="submit" value="OK" class="animated" disabled/>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic Phone Number Validator - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,900,400italic);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css);
body { background: #B2675E; font-weight: 300; color: #f2e8dd; font-size: 2em; font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif; text-align: center;
}
::-webkit-input-placeholder { color: rgba(0, 50, 73, 0.4);
}
h2 { margin-top: 5%; font-size: 22px; font-weight: 300;
}
form { color: #003249; display: block; width: 700px; margin: 0 auto; margin-top: 5%;
}
form input { border: none; padding: 1em 1em;
}
form input[type="tel"] { background: #EBDCCB; position: relative; z-index: 100;
}
form input[type="tel"]:focus { background: #f2e8dd; outline: none;
}
form input[type="submit"] { background: #7D3238; font-weight: 800; color: white; margin-left: -10px; -webkit-transition: background .3 ease; z-index: 1; position: relative;
}
form input[type="submit"]:hover { background: #592328;
}
.sendApp:not(.sendApp--active) input[type='tel'] { transform: translateX(55px); transition: transform .3s ease; z-index: 100;
}
.sendApp:not(.sendApp--active) input[type='submit'] { transform: translateX(-50px); opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 1;
}
.sendApp input[type='tel'] { transform: translateX(0); transition: transform .3s ease;
}
.sendApp input[type='submit'] { transform: translateX(0); opacity: 1; transition: opacity .3s ease, transform .3s ease;
}
::-webkit-input-placeholder { color: rgba(0, 50, 73, 0.4);
}
:-moz-placeholder { /* Firefox 18- */ color: rgba(0, 50, 73, 0.4);
}
::-moz-placeholder { /* Firefox 19+ */ color: rgba(0, 50, 73, 0.4);
}
:-ms-input-placeholder { color: rgba(0, 50, 73, 0.4);
}

Dynamic Phone Number Validator - Script Codes JS Codes

;(function($, window, document, undefined) { 'use strict';	// validation var form = '.sendApp', className = 'sendApp--active', number = 'input[type="tel"]',	submit = 'input[type="submit"]'; $(form).each(function() { var $form = $(this), $number = $form.find(number), val = ''; $number.on('keyup.addClassWhenTel', function() { val = $number.val();	var status = /^\+(?:[0-9] ?){10,14}[0-9]$/.test(val); $(submit).prop('disabled', !status); $form.toggleClass(className, val != '' && status ); }); });
})(jQuery, window, document);
// Inspired by:
// http://osvaldas.info/minimalist-newsletter-subscription-form
Dynamic Phone Number Validator - Script Codes
Dynamic Phone Number Validator - Script Codes
Home Page Home
Developer Sdnyco
Username sdnyco
Uploaded November 23, 2022
Rating 3
Size 4,254 Kb
Views 16,192
Do you need developer help for Dynamic Phone Number Validator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sdnyco (sdnyco) Script Codes
Name
Drop Bounce SVG Path
A stupid-simple CSS-only slideshow
Pong Game
Tinder-esque Loading
Pong Instructions
Pong Touch Instructions
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!