myei-validatejs
Version:
A JavaScript plugin that makes easy to implement validations on a website
91 lines (76 loc) • 3.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="demo.css">
<title>Validate.js</title>
</head>
<body class="dark-mode">
<div class="container">
<div class="alert alert-success good" role="alert" style="display: none;">
Everything is perfect!
</div>
<div class="alert alert-danger bad" role="alert" style="display: none;">
Oh no! Something wrong...
</div>
<br>
<div class="row">
<div class="col-md-10">
<h1>Validate.js Demo</h1>
</div>
<div class="col-md-2">
<span class="btn dark-btn">Light Mode <i class="far fa-moon"></i></span>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-1">
<i class="far fa-plus-square add-field"></i>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-6 text-center offset-md-3">
Target:
<span class="badge badge-default control set single" data-opt="target">all</span>
<span class="badge badge-primary control set single" data-opt="target">group</span>
<br>
Options:
<span class="badge badge-default control set" data-opt="required">required</span>
<span class="badge badge-primary control set" data-opt="warn">warn</span>
<span class="badge badge-primary control set" data-opt="descriptions">descriptions</span>
<span class="badge badge-primary control set" data-opt="animations">animations</span>
<span class="badge badge-primary control set set-in" data-opt="color" data-in="Type hex color:">color</span>
<span class="badge badge-primary control set" data-opt="realTime">realTime</span>
<span class="badge badge-secondary control">lang</span>
<span class="badge badge-primary control set" data-opt="debug">debug</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 text-center offset-md-4">
<button class="btn validate">Validate!</button>
</div>
</div>
</div>
<input type="hidden" id="target" value="group">
<input type="hidden" id="required" value="false">
<input type="hidden" id="warn" value="true">
<input type="hidden" id="descriptions" value="true">
<input type="hidden" id="animations" value="true">
<input type="hidden" id="color" value="red">
<input type="hidden" id="realTime" value="true">
<input type="hidden" id="debug" value="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/myei/validate.js@master/validate.min.js"></script>
<script src="demo.js"></script>
</body>
</html>