<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="form-container">
<form action="" method="post" id="form" novalidate="novalidate">
<h2>Registration form</h2>
<div class="form-group">
<label for="name">Name:</label>
<input class="form-control" type="text" name="name" minlength="2" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input class="form-control" type="text" name="age" minlength="2" required>
</div>
<div class="form-group">
<label for="telephone">Telephone:</label>
<input class="form-control" type="text" name="telephone" id="phone" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" type="text" name="email" required>
</div>
<div class="form-group">
<p class="accept">Accept our policy:</p>
<div class="checkbox">
<input type="checkbox" id="agree" name="agree" required>
<label for="agree" class="checkbox-switch"></label>
</div>
</div>
<div class="form-group">
<input class="submit form-control" type="submit" name="submit" value="Submit">
</div>
</form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js'></script><script src="./script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #383737;
overflow-x: hidden;
height: 180vh;
}
.form-container {
width: 400px;
margin: 0 auto;
box-shadow: 0px 0px 10px #000;
margin-top: 20px;
padding: 20px;
color: #E3DFDF;
}
h2 {
text-align: center;
}
label {
display: block;
margin: 10px 0;
}
label.error {
color: #D51C1C;
margin-top: -6px;
}
input {
height: 26px;
width: 100%;
border-radius: 4px;
outline: none;
border: 1px solid #88FC56;
background-color: #555755;
color: #E3DFDF;
font-size: 14px;
padding-left:10px;
cursor: pointer;
margin-bottom: 20px;
}
input:focus {
box-shadow: 0 0 6px #88FC56;
}
input.error {
border: 1px solid #D51C1C;
}
input:focus.error {
box-shadow: 0 0 6px #D51C1C;
}
.submit {
display: block;
width: 50%;
margin: 20px auto 0 auto;
height: 40px;
background-color: #88FC56;
color: #555755;
font-weight: bold;
padding-left: 0;
}
input[type="checkbox"] {
visibility: hidden;
width: 20px;
}
input[type="checkbox"]:after {
content: '';
display: block;
position: absolute;
top: -1px;
left: -1px;
width: 20px;
height: 20px;
border: 1.6px solid #D51C1C;
border-radius: 4px;
box-sizing: border-box;
transition: all .3s ease;
}
input[type=checkbox]:checked ~ .checkbox-switch:after {
opacity: 1;
}
input[type=checkbox].error:after {
visibility: visible;
}
.checkbox {
width: 20px;
height: 20px;
border-radius: 4px;
background-color: #555755;
cursor: pointer;
position: relative;
border: 1px solid #88FC56;
}
.checkbox input {
height: 20px;
margin-bottom: 0;
}
.checkbox #agree-error {
position: absolute;
top: 6px;
left: 30px;
min-width: 200px;
}
.checkbox-switch:after {
content: '';
display: block;
position: absolute;
height: 5px;
width: 10px;
border-top: 2px solid #88FC56;
border-right: 2px solid #88FC56;
top: 4px;
left: 4px;
transform: rotate(132deg);
opacity: 0;
}
.checkbox-switch {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
cursor: pointer;
}
.accept {
margin-bottom: 10px;
}
$('body').click(function(){console.log(8888)})
$('#form').validate({
rules: {
age: {
age_check: true
},
telephone: {
phone_check: true
},
email: {
email: true
}
},
messages: {
name: "Please enter your name",
age: "You must be at least 18 years of age",
telephone: "Please enter your telephone",
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
$.validator.addMethod('age_check', function(value, element) {
if (value >= 18){
return true;
}
});
$.validator.addMethod('phone_check', function(value, element) {
if (value.length === 16){
return true;
}
});
// jQuery Mask Plugin v1.14.10
// github.com/igorescobar/jQuery-Mask-Plugin
var $jscomp={scope:{},findInternal:function(a,f,c){a instanceof String&&(a=String(a));for(var l=a.length,g=0;g=k?h:a+(d.slice(0,a).length-e.slice(0,a).length));return a},behaviour:function(e){e=e||window.event;d.invalid=[];var h=b.data("mask-keycode");if(-1===a.inArray(h,m.byPassKeys)){var h=d.getMasked(),c=d.getCaret();setTimeout(function(a,b){d.setCaret(d.calculateCaretPosition(a,b))},10,c,h);d.val(h);d.setCaret(c);return d.callbacks(e)}},getMasked:function(a,b){var c=
[],p=void 0===b?d.val():b+"",k=0,g=h.length,f=0,l=p.length,n=1,v="push",w=-1,r,u;e.reverse?(v="unshift",n=-1,r=0,k=g-1,f=l-1,u=function(){return-1