From b90dd1c5005299467ed63d01cae64dc96a9fc92f Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 18 Jun 2018 19:41:21 +0800 Subject: Fix docs content and add more examples --- docs/elements.html | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 4f256c1..8d39557 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -133,7 +133,7 @@

Typography

- +
@@ -399,7 +399,7 @@

Buttons

- +

Buttons include simple button styles for actions in different types and sizes.

@@ -685,7 +685,7 @@
-
@@ -1050,9 +1050,6 @@ </div>

Form validation styles

-

To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. - Use the form-input-hint class to provide form validation success and error messages. -

@@ -1067,11 +1064,6 @@

Passwords must have at least 8 characters.

-
- - -

The Email address is unavailable.

-
Select @@ -1117,6 +1109,9 @@
+

To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. + Use the form-input-hint class to provide form validation success and error messages. + 

<form>
   <!-- form validation class: has-success -->
   <div class="form-group has-success">
@@ -1140,6 +1135,25 @@
     </label>
   </div>
 </form>
+
+
+
+
+ + +
+
+ + +
+
+
+

You can use input pattern attribute to validate the value as well.

+ 
<!-- pattern validation example for Email -->
+<input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+<!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+<input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">

Form disabled styles

-- cgit v1.3.1-23-gd82d