valy
Version:
Intuitive frontend form validation
187 lines (124 loc) • 6.43 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Validator</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<script type="text/javascript" src="lib/valy.js"></script>
<style type="text/css" media="screen">
.row { overflow: hidden; }
.col { float: left; width: 50%; }
:invalid { background: red ; }
:required { background: yellow; }
</style>
</head>
<body>
<form action="?" method="post"
data-validator-message-container=".form-messages"
>
<div class="form-messages">
</div><!-- /.form-messages -->
<div class="row">
<div class="col">
<h4>Element <strong>"textarea"</strong>:</h4>
<div class="field">
<textarea name="" id="" cols="30" rows="10"
data-validator-class-holder=".field"
data-validator-message-container=".error-container"
data-validator-error-email="Please enter valid email"
></textarea>
<div class="error-container">1</div><!-- /.error-container -->
</div><!-- /.field -->
<div class="error-container">2</div><!-- /.error-container -->
<h4>Element <strong>"select"</strong>:</h4>
<select name="" id="">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
</select>
<h4>Element <strong>"select"</strong> multiple:</h4>
<select name="" id="" multiple data-validator-rules="selectedCount(2)"
data-validator-error-selectedcount="Please select two options."
>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
</select>
<h4>Element <strong>"button"</strong>:</h4>
<button type="submit">Button</button>
<h4>Element <strong>"datalist"</strong>:</h4>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<h4>Element <strong>"keygen"</strong>:</h4>
<keygen>
<h4>Element <strong>"output"</strong>:</h4>
<output></output>
</div><!-- /.col -->
<div class="col">
<h4>Input type <strong>"text"</strong>:</h4>
<input type="text" required>
<h4>Input type <strong>"password"</strong>:</h4>
<input type="password">
<h4>Input type <strong>"submit"</strong>:</h4>
<input type="submit">
<h4>Input type <strong>"reset"</strong>:</h4>
<input type="reset">
<h4>Input type <strong>"radio"</strong>:</h4>
<input type="radio" name="radio" required>
<h4>Input type <strong>"radio"</strong>:</h4>
<input type="radio" name="radio" required>
<h4>Input type <strong>"radio"</strong>:</h4>
<input type="radio" name="radio" required>
<h4>Input type <strong>"checkbox"</strong>:</h4>
<input type="checkbox">
<h4>Input type <strong>"button"</strong>:</h4>
<input type="button">
<h4>Input type <strong>"color"</strong>:</h4>
<input type="color">
<h4>Input type <strong>"date"</strong>:</h4>
<input type="date">
<h4>Input type <strong>"datetime"</strong>:</h4>
<input type="datetime">
<h4>Input type <strong>"datetime-local"</strong>:</h4>
<input type="datetime-local">
<h4>Input type <strong>"email"</strong>:</h4>
<input type="email" data-validator-rules="email; number; presence(0, 10);float; pattern(dasda\/s;.,); regex(/dasdasdasdas,;)()das/, dasdasdas)"
data-validator-class-holder=".form-control"
data-validator-message-container=".field-message"
data-validator-error-email="Please enter valid email"
data-validator-error-number="Please enter valid number"
data-validator-error-preseence="Please enter some text"
>
<h4>Input type <strong>"month"</strong>:</h4>
<input type="month">
<h4>Input type <strong>"number"</strong>:</h4>
<input type="number">
<h4>Input type <strong>"range"</strong>:</h4>
<input type="range">
<h4>Input type <strong>"search"</strong>:</h4>
<input type="search">
<h4>Input type <strong>"tel"</strong>:</h4>
<input type="tel">
<h4>Input type <strong>"time"</strong>:</h4>
<input type="time">
<h4>Input type <strong>"url"</strong>:</h4>
<input type="url">
<h4>Input type <strong>"week"</strong>:</h4>
<input type="week">
</div><!-- /.col -->
</div><!-- /.row -->
</form>
<script type="text/javascript">
new Validator(document.querySelector('form'));
console.log(Validator.validateForm(document.querySelector('form')));
</script>
</body>
</html>