-
Notifications
You must be signed in to change notification settings - Fork 0
/
application001.html
58 lines (50 loc) · 1.57 KB
/
application001.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
<html>
<head>
<meta charset="utf-8">
<title>Sample Form 001</title>
<style>
#mainForm.invalid {
color:red;
}
#mainForm.invalid .validationMessage {
display:initial;
}
#mainForm,
#mainForm.invalid .submitButton {
color: gray;
}
.validationMessage {
display:none;
}
</style>
</head>
<body id="mainApp">
<script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/4.17.4/dist/lodash.js"></script>
<script src="https://cdn.rawgit.com/keeganstreet/specificity/2ab18ea1/specificity.js"></script>
<script src="Morbid.js"></script>
<script>
M.rein(document.getElementById('mainApp'));
M.bulk({
'#mainForm' : {
validate: (event) => M('#mainForm input[name=firstname]').val().length>0,
'keyup change click': (event) => {M('#mainForm').update(); console.log(event)} ,
update: () => {
M('#mainForm').toggleClass('invalid', !M('#mainForm').validate());
console.log('update');
},
},
'#mainForm:not(.invalid) .submitButton' : {
click: (event) => M('#mainForm').validate() && M('#mainForm').submit()
}
});
</script>
<form id='mainForm' class="invalid">
First name:<span class="validationMessage"> this field is required!</span> <br>
<input type="text" name="firstname"><br>
Last name: <span class="validationMessage">(required)</span> <br>
<input type="text" name="lastname">
<input type="button" class="submitButton" value="submit if okay"></input>
</form>
</body>
</html>