-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex3.html
130 lines (115 loc) · 5.06 KB
/
index3.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>Awkward Check - Demo #3</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.aw-check.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
// Add custom validation rules (data-checkrule) by adding regular expressions or function refrences to the array below
aw_check_custom_validation['url'] = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
aw_check_custom_validation['ajaxemail'] = aw_check_validate_email;
// Init form
aw_check_init( '#form' );
// This is just a function for adding different classes based on the users browser.
// Thats because browsers like to render html and css differently, which is logical..
if ( jQuery.browser.mozilla ) { jQuery( 'body' ).addClass( 'mozilla' ) };
});
// Custom validation function
// @parent = Reference to the input field parent !important
// @value = The input field value !important
// @checkpassed = The array that holds each fields check state !important
function aw_check_validate_email( parent, value, checkpassed ) {
// Create email regular expression
var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
// Check if it's a valid e-mail address
if ( value == '' || !regex.test( value ) ) {
// If not, print error message
aw_check_print_error( parent, 'Please enter a valid e-mail address' );
// Push false into array if not valid !important
checkpassed.push( false );
}
else {
// If it's valid, do an ajax post
jQuery.ajax({
url: "ajax.php",
global: false,
type: "POST",
data: { checkemail : true, email : value },
dataType: "html",
async: false,
success: function( msg ) {
if ( msg == 'success' )
{
// If the post return 'success' remove error
aw_check_hide_error( parent );
// Push true into array if valid !important
checkpassed.push( true );
}
else
{
// Else print what the post returned
aw_check_print_error( parent, msg );
// Push false into array if not valid !important
checkpassed.push( false );
}
}
});
}
}
</script>
</head>
<body>
<h1 style="text-align: center;">Awkward Check</h1>
<div class="menu"><a href="index.html">Demo #1</a> (Normal) | <a href="index2.html">Demo #2</a> (Overlay labels) | <a href="index3.html" class="active">Demo #3</a> (Custom Validation)</div>
<div id="error"></div>
<form id="form" class="form" method="post">
<div class="input-box" data-checkfield="#input-name" data-checkrule="text" checklength="10" data-checklabel="Enter your name">
<input type="text" id="input-name" name="input-name" />
<span class="check"></span>
<span class="error"></span>
</div>
<div style="margin-bottom: 3px; color: #555;">The email address [email protected] already exists, try it out!</div>
<div class="input-box" data-checkfield="#input-email" data-checkrule="ajaxemail" data-checkerror="Please enter a valid e-mail address" data-checklabel="Enter your email (Custom Validation / Ajax Function)">
<input type="text" id="input-email" name="input-email" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-phone" data-checkrule="phone:empty" data-checkerror="Please enter a valid phone number" data-checklabel="Enter your phone number (optional)">
<input type="text" id="input-phone" name="input-phone" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-year" data-checkrule="number:empty" data-checkerror="Please enter a valid year" data-checklabel="Enter the year you were born (optional)">
<input type="text" id="input-year" name="input-year" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-address" data-checkrule="text" data-checklabel="Enter your address">
<textarea id="input-address" name="input-address" rows="3"></textarea>
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box" data-checkfield="#input-url" data-checkrule="url" data-checkerror="Please enter a valid url adress (include http://)" data-checklabel="URL (Custom Validation / Regular Expression)">
<input type="text" id="input-url" name="input-url" />
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box check" data-checkfield="#input-check" data-checkrule="check">
<input type="checkbox" id="input-check" name="input-check" />
<label>Check this checkbox (clickable text)</label>
<span class="check"></span>
<span class="error"></span>
</div>
<div class="input-box">
<input type="submit" name="submit" value="Submit form" onclick="javascript: return aw_check('#form');" />
</div>
</form>
<div style="text-align: center; margin-top: 50px;">
<a href="http://www.awkwardgroup.com/sandbox/awkward-check-a-jquery-plugin">
Click here to download and learn more about this jQuery plugin.
</a>
</div>
</body>
</html>