html-form-validation
Version:
HTML forms validation plugin
101 lines (92 loc) • 4.94 kB
HTML
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Html form validation</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<meta name="HandheldFriendly" content="true">
<meta name="theme-color" content="#bbb5b5">
<link rel="icon" href="example/favicon.png">
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!--validator.js-->
<script src="dist/validator.min.js"></script>
<!--validator.css-->
<link href="dist/validator.min.css" rel="stylesheet">
<!--EXAMPLE CSS-->
<link href="example/assets/example.css" rel="stylesheet">
</head>
<body>
<div class="form-container">
<form class="form">
<!-- email field -->
<label class="form-input userEmail" data-validation="required" data-validation-type="email">
<span>E-mail</span>
<input type="email" placeholder="Введите e-mail" name="userEmail">
<div class="error"></div>
</label>
<!-- text field -->
<label class="form-input userName" data-validation="required" data-validation-type="text" data-validation-text="Введите корректное имя">
<span>Имя</span>
<input type="text" placeholder="Введите имя" name="userName" data-validation-condition="length" data-min-length="2">
<div class="error"></div>
</label>
<!-- phone field (not finished yet) -->
<label class="form-input userPhone" data-validation="required" data-validation-type="phone">
<span>Телефон</span>
<input type="tel" placeholder="Введите номер телефона" name="userTel" data-validation-condition="length" data-min-length="10">
<div class="error"></div>
</label>
<!-- select -->
<label class="form-input userRegion" data-validation="required" data-validation-type="select">
<span>Регион доставки</span>
<select name="userRegion">
<option value="0" selected disabled>Регион доставки товара</option>
<option value="1">Алматы</option>
<option value="2">Актау</option>
<option value="3">Актобе</option>
<option value="4">Москва</option>
<option value="5">Другой</option>
</select>
<div class="error"></div>
</label>
<!-- radio button -->
<label class="userPayment form-input" data-validation="required" data-validation-type="radio"
data-validation-text="Выберите способ оплаты">
<span>Способ оплаты</span>
<label>
<input class="inline-middle" type="radio" name="userPayment" value="cashbox">
Наличными на кассе
</label>
<label>
<input class="inline-middle" type="radio" name="userPayment" value="credit">
Кредитной картой
</label>
<div class="error"></div>
</label>
<!-- captcha -->
<label class="form-input userCaptcha" data-validation="required" data-validation-type="text">
<span>Код проверки</span>
<img src="example/assets/captcha.png">
<input type="text" name="captcha" placeholder="Введите код проверки"
data-validation-condition="equal" data-equal="zQSg2">
<div class="error"></div>
</label>
<!-- text field -->
<label class="form-input userMessage" data-validation="required" data-validation-type="text">
<span>Примечание</span>
<textarea placeholder="Отдать лично в руки" name="userMessage"
data-validation-condition="length" data-min-length="50" data-max-length="200"></textarea>
<div class="error"></div>
</label>
<button class="validate-form-button" type="submit">Оформить заказ</button>
</form>
</div>
<!--Initialize Validator (example)-->
<script>$('form').validator();</script>
</body>
</html>