Skip to content

Instantly share code, notes, and snippets.

@carloslenondavis

carloslenondavis/validate-isNumber.html

Last active June 10, 2018 20:05
Show Gist options
  • Save carloslenondavis/4629962c4906ebc700a68beef50c0031 to your computer and use it in GitHub Desktop.
Save carloslenondavis/4629962c4906ebc700a68beef50c0031 to your computer and use it in GitHub Desktop.
Download ZIP
Validate is number in form input type text, using html5, css3 and jquery
Raw
validate-isNumber.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Code
</a>
</div>
</div>
</nav>
<div class="col-md-4 col-md-offset-4">
<div class="page-header">
<h1>Validate <small>if fields are only number</small></h1>
</div>
<form class="forms">
<div class="form-group">
<label for="phone1">Phone 1</label>
<input type="text" class="form-control" id="phone1" placeholder="Insert number" />
</div>
<div class="form-group">
<label for="phone2">Phone 2</label>
<input type="text" class="form-control" id="phone2" placeholder="Insert Number" />
</div>
<button type="button" class="btn btn-default btn-add">
<i class="fa fa-plus"></i>
<span>Add</span>
</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.btn-add').click(function(){
var inputs = $('.forms :text');
inputs.each(function(i, el) {
var elValue = $(el).val();
$(el).parent('.form-group').removeClass('has-error has-success').addClass(isNaN(elValue) || elValue === "" ? 'has-error' : 'has-success');
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment