126 lines
4.0 KiB
HTML
126 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||
|
|
<style>
|
||
|
|
.no-float {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mt30 {
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.js-validate-error-label {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__radio, .form__checkbox {
|
||
|
|
margin-right: 7px !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="container">
|
||
|
|
<div class="col-md-6 center-block no-float mt30">
|
||
|
|
<form action="#" class="js-form form">
|
||
|
|
<div class="row">
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<input type="text" class="form__input form-control" placeholder="Enter your name" autocomplete="off" data-validate-field="name" name="name" value="dkdf">
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<input type="text" class="form__input form-control" placeholder="Enter your login" autocomplete="off" data-validate-field="login" name="login" value="zzz">
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<input type="email" class="form__input form-control" placeholder="Enter your email" autocomplete="off" data-validate-field="email" name="email" value="[email protected]">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="password" class="form__input form-control" placeholder="Enter your password" autocomplete="off" data-validate-field="password" name="password" value="123fd">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<textarea name="msg" cols="30" rows="10" class="form__textarea form-control" data-validate-field="text">sdfsfsdfsdf</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="checkbox" name="check1" id="checkbox" class="form__checkbox" checked><label for="checkbox">I agree</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label><input type="checkbox" name="check2" class="form__checkbox" data-validate-field="checkbox2" checked>I agree</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Male</label>
|
||
|
|
<br>
|
||
|
|
<label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Female</label>
|
||
|
|
</div>
|
||
|
|
<button class="form__btn btn btn-primary">SUBMIT</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="js/just-validate.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
new window.JustValidate('.js-form', {
|
||
|
|
rules: {
|
||
|
|
checkbox2: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
radio: {
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
email: {
|
||
|
|
required: true,
|
||
|
|
email: true,
|
||
|
|
remote: {
|
||
|
|
url: 'https://just-validate-api.herokuapp.com/check-correct',
|
||
|
|
sendParam: 'email',
|
||
|
|
successAnswer: 'OK',
|
||
|
|
method: 'GET',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
login: {
|
||
|
|
required: true,
|
||
|
|
remote: {
|
||
|
|
url: 'https://just-validate-api.herokuapp.com/check-correct',
|
||
|
|
sendParam: 'login',
|
||
|
|
successAnswer: 'OK',
|
||
|
|
method: 'GET'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
password: {
|
||
|
|
strength: {
|
||
|
|
custom: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
messages: {
|
||
|
|
login: {
|
||
|
|
remote: 'Login already exists'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
focusWrongField: true,
|
||
|
|
submitHandler: function (form, values, ajax) {
|
||
|
|
console.log(values)
|
||
|
|
ajax({
|
||
|
|
url: 'https://just-validate-api.herokuapp.com/submit',
|
||
|
|
method: 'POST',
|
||
|
|
data: values,
|
||
|
|
async: true,
|
||
|
|
callback: (response) => {
|
||
|
|
console.log(response);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
invalidFormCallback: function (errors) {
|
||
|
|
console.log(errors);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|