Skip to content
This repository
Browse code

Woo! colour code samples

  • Loading branch information...
commit b1de33916520790e0bc9452209a590ff980e9485 1 parent 897dd0d
Ryan Seddon authored

Showing 1 changed file with 53 additions and 37 deletions. Show diff stats Hide diff stats

  1. +53 37 readme.md
90 readme.md
Source Rendered
@@ -24,22 +24,26 @@ Also supported is the constraint validation API:
24 24
25 25 ### Example
26 26
27   - <form id="signup">
28   - <label>Email</label>
29   - <input type="email" placeholder="e.g. ryan@example.net" required />
30   -
31   - <label>Phone</label>
32   - <input type="tel" id="tel" name="tel" pattern="\d{10}" />
33   -
34   - <label>Post code *</label>
35   - <input type="number" min="1001" max="8000" required />
36   -
37   - <input type="submit" />
38   - </form>
  27 +```html
  28 +<form id="signup">
  29 + <label>Email</label>
  30 + <input type="email" placeholder="e.g. ryan@example.net" required />
  31 +
  32 + <label>Phone</label>
  33 + <input type="tel" id="tel" name="tel" pattern="\d{10}" />
  34 +
  35 + <label>Post code *</label>
  36 + <input type="number" min="1001" max="8000" required />
  37 +
  38 + <input type="submit" />
  39 +</form>
  40 +```
39 41
40 42 On page load you run the H5F setup method:
41 43
42   - H5F.setup(document.getElementById("signup"));
  44 +```js
  45 +H5F.setup(document.getElementById("signup"));
  46 +```
43 47
44 48 For a working demo download the demo files.
45 49
@@ -47,51 +51,63 @@ For a working demo download the demo files.
47 51
48 52 With `setCustomValidity()` method you can set a custom error message on a field and it will be in an invalid state until the custom message is set back to an empty string.
49 53
50   - document.getElementById("other").setCustomValidity("Please enter some information");
  54 +```js
  55 +document.getElementById("other").setCustomValidity("Please enter some information");
  56 +```
51 57
52 58 This field will be in a permanent invalid state, we can return the custom error message by using the `validationMessage` attribute
53 59
54   - document.getElementById("other").validationMessage;
55   - // "Please enter some information"
  60 +```js
  61 +document.getElementById("other").validationMessage;
  62 +// "Please enter some information"
  63 +```
56 64
57 65 A good use case for this functionality is a password comparison field.
58 66
59   - var pass = document.getElementById("pass"),
60   - cpass = document.getElementById("cpass");
61   -
62   - if(cpass.value !== pass.value) {
63   - cpass.setCustomValidity("Your password doesn't match");
64   - } else {
65   - cpass.setCustomValidity("");
66   - }
  67 +```js
  68 +var pass = document.getElementById("pass"),
  69 + cpass = document.getElementById("cpass");
  70 +
  71 +if(cpass.value !== pass.value) {
  72 + cpass.setCustomValidity("Your password doesn't match");
  73 +} else {
  74 + cpass.setCustomValidity("");
  75 +}
  76 +```
67 77
68 78 #### Passing multiple forms
69 79
70 80 You can pass an HTMLFormElement, HTMLCollection of HTMLFormElements, or Array of HTMLFormElements.
71 81
72   - H5F.setup([document.getElementById("form1"),document.getElementById("form2"),document.getElementById("form3")]);
  82 +```js
  83 +H5F.setup([document.getElementById("form1"),document.getElementById("form2"),document.getElementById("form3")]);
  84 +```
73 85
74 86 #### Optional settings argument
75 87
76 88 The `H5F.setup` method also accepts a second optional argument so you can specify the fields validation class names:
77 89
78   - H5F.setup(document.getElementById("signup"), {
79   - validClass: "valid",
80   - invalidClass: "invalid",
81   - requiredClass: "required",
82   - placeholderClass: "placeholder"
83   - });
  90 +```js
  91 +H5F.setup(document.getElementById("signup"), {
  92 + validClass: "valid",
  93 + invalidClass: "invalid",
  94 + requiredClass: "required",
  95 + placeholderClass: "placeholder"
  96 +});
  97 +```
84 98
85 99 #### Form submission blocking
86 100
87 101 HTML5 forms will block form submission until the form is valid this can be switched off by setting the `novalidate` attribute on the parent form element.
88 102
89   - <form id="signup" novalidate>
90   - <label>Email</label>
91   - <input type="email" placeholder="e.g. ryan@example.net" required />
92   -
93   - <input type="submit" />
94   - </form>
  103 +```html
  104 +<form id="signup" novalidate>
  105 + <label>Email</label>
  106 + <input type="email" placeholder="e.g. ryan@example.net" required />
  107 +
  108 + <input type="submit" />
  109 +</form>
  110 +```
95 111
96 112 The above form regardless of attributes set won't validate and will submit, default behaviour is to block form submission.
97 113

0 comments on commit b1de339

Please sign in to comment.
Something went wrong with that request. Please try again.