jquery-validation.github.io/demo/aria-describedby-cleanup.html at master · jquery-validation/jquery-validation.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Validation Plugin Demo - ariaDescribedByCleanup set to true</title>
	<link rel="stylesheet" href="css/screen.css">
	<script src="/lib/jquery.js"></script>
	<script src="/lib/jquery.validate.js"></script>
	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$().ready(function() {
		var valid = $("#group-form").validate({
		  errorElement: 'div',

		  groups: {
		    fullName: "first middle last"
		  },
		  ariaDescribedByCleanup: true,
		  rules: {

		    first: { required: true, minlength: 2 },
		    middle: {required: true, minlength: 2 },
		    last: {required: true},
		    email: { required: true, email: true },
			phone: { required: true },
			comment: {required: true, maxlength: 300}
		  }
		});
		$('button[type="reset"]').on('click',function(){
		  valid.resetForm();
		});

	});
	</script>
	<style>
		#group-form {
			width: 35rem;
		}
		.textarea-container {
			display: inline-block;
		}
		.description {
			display: block;
		}
	</style>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo - ariaDescribedByCleanup set to true</h1>
<main id="main">

	<form id="group-form" class="cmxform" aria-labelledby="group-example-title" aria-describedby="required-note">

	<div class="box">
		<h2 id="group-example-title">Example with group</h2>
		<div><p id="required-note">Fields marked with * are required</p></div>

	    <div id="errorlabelcontainer"></div>
	    <fieldset>
			<legend>Name*</legend>
			<div class="row">
				<div class="col">
	  	    <label for="first">First</label>
	  	    <input type="text" aria-required="true" id="first" name="first"/>
	  	    </div>
	  	      <div class="col">
	  	    <label for="middle">Middle</label>
	  	    <input type="text" aria-required="true" id="middle" name="middle"/>
	  	    </div>
	  	      <div class="col">
	  	    <label for="last">Last</label>
	  	    <input type="text" aria-required="true" id="last"  name="last"/>
	  	    </div>
			</div>

	    </fieldset>

	    <div class="row">
	    <label for="email">Email*</label>
	    <input type="email" id="email" aria-required="true" name="email"/>
	    </div>

		<div class="row">
	    <label for="phone">Phone*</label>
	    <input type="text" id="phone" aria-required="true" name="phone"/>
	    </div>
		<div class="row">
			<label for="comment">Your comment*</label>
			<div class="textarea-container">
				<textarea id="comment" name="comment" aria-required="true" aria-describedby="comment-max-length"></textarea>
				<span class="description" id="comment-max-length">300 characters maximum</span>
			</div>

		</div>
		<div class="row">

		    <button>Submit</button>
		    <button type="reset">Reset</button>
		</div>
	</div>

</form>
<p><a href="index.html">Back to main page</a></p>
</div>
</main>
</html>