Skip to content

Commit bfd2cc0

Browse files
mgildeamgildea
committed
block form submit on enter unless final view
include example html form
1 parent 5738d5d commit bfd2cc0

File tree

5 files changed

+206
-29
lines changed

5 files changed

+206
-29
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ npm install multi-step-form-js
1111

1212
## Demo
1313

14-
View a [jsfiddle here](http://jsfiddle.net/mgildea/ez94n125/13/show/)
14+
View a [jsfiddle here](http://jsfiddle.net/mgildea/ez94n125/17/show/)
1515

1616
## Setup
1717

@@ -121,6 +121,7 @@ Example Multi-Step-Form-Js initialization using unobtrusive validation
121121

122122

123123
## Release History
124+
* 0.0.8 block form submit on enter if nonfinal view
124125
* 0.0.6 documentation updates
125126
* 0.0.4 allow parameters for non unobtrusive validation
126127
* 0.0.1 Initial Release

‎css/multi-step-form.css renamed to ‎example/css/multi-step-form.css

File renamed without changes.

‎example/index.html

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
9+
<title>Multi Step Form Js Demo</title>
10+
11+
<!--Bootstrap -->
12+
<!-- Latest compiled and minified CSS -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
14+
crossorigin="anonymous">
15+
<!-- Font Awesome -->
16+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css">
17+
18+
<link rel="stylesheet" href="/example/css/multi-step-form.css" type="text/css">
19+
</head>
20+
21+
<body>
22+
23+
<div id="wrapper">
24+
25+
<div id="container body-content">
26+
<form class="form-horizontal msf">
27+
<div class="msf-header">
28+
<div class="row text-center">
29+
<div class="msf-step col-md-4"><i class="fa fa-clipboard"></i> <span>Enter Request Details</span></div>
30+
<div class="msf-step col-md-4"><i class="fa fa-credit-card"></i><span>Further Details</span></div>
31+
<div class="msf-step col-md-4"><i class="fa fa-check"></i> <span>Review and Submit</span></div>
32+
</div>
33+
</div>
34+
35+
<div class="msf-content">
36+
<div class="msf-view">
37+
38+
<div class="row">
39+
<div class="col-md-6 col-md-offset-3">
40+
<div class="form-group">
41+
<input id="name" name="name" type="text" class="form-control" placeholder="Name" data-bind="value: Name" data-val="true"
42+
data-val-required="name is required">
43+
<!--data-val="true" data-val-required="name is required"-->
44+
</div>
45+
<div class="form-group">
46+
<input id="email" name="email" type="text" class="form-control" placeholder="Email" data-bind="value: Email" data-val="true"
47+
data-val-required="email is required">
48+
<!-- data-val="true" data-val-required="email is required -->
49+
</div>
50+
<div class="form-group">
51+
<textarea id="details" name="details" rows="10" class="form-control" placeholder="Enter Details" data-bind="value: Details"></textarea>
52+
</div>
53+
54+
</div>
55+
</div>
56+
57+
58+
</div>
59+
<div class="msf-view">
60+
<div class="row">
61+
<div class="col-md-6 col-md-offset-3">
62+
<div class="form-group">
63+
<select id="countries" name="countries" class="form-control" data-bind="options: availableCountries, selectedOptions: chosenCountries"
64+
data-val="true" data-val-required="select a country" size="5" multiple="true"></select>
65+
</div>
66+
67+
<div class="form-group">
68+
69+
<select id="type" name="type" class="form-control" data-bind="options: availableTypes, selectedOptions: chosenType, optionsCaption: 'Choose Request Type'"
70+
data-val="true" data-val-required="Request type is required.">
71+
</select>
72+
73+
<!-- data-val="true" data-val-required="email is required -->
74+
</div>
75+
<!-- <div class="form-group">
76+
<textarea id="additionaldetails" name="additionaldetails" rows="10" class="form-control" placeholder="Enter Additional Details" data-bind="value: AdditionalDetails"></textarea>
77+
</div>
78+
-->
79+
80+
</div>
81+
</div>
82+
</div>
83+
<div class="msf-view">
84+
<div class="row">
85+
<div class="col-md-6 col-md-offset-3">
86+
<label>Name</label> : <span data-bind="text: Name"></span>
87+
</div>
88+
</div>
89+
<div class="row">
90+
<div class="col-md-6 col-md-offset-3">
91+
<label>Email</label> : <span data-bind="text: Email"></span>
92+
</div>
93+
</div>
94+
<div class="row">
95+
<div class="col-md-6 col-md-offset-3">
96+
<label>Type</label> : <span data-bind="text: chosenType"></span>
97+
</div>
98+
</div>
99+
<div class="row">
100+
<div class="col-md-6 col-md-offset-3">
101+
<label>Countries</label> : <span data-bind="text: chosenCountries"></span>
102+
</div>
103+
</div>
104+
<div class="row">
105+
<div class="col-md-6 col-md-offset-3">
106+
<label>Details</label> : <span data-bind="text: Details"></span>
107+
</div>
108+
</div>
109+
110+
<div class="row">
111+
<div class="col-md- col-md-offset-3">
112+
<div class="form-group">
113+
<input id="additional" name="additional" type="text" class="form-control" placeholder="Additional Details" data-val="true" data-val-required="name is required">
114+
</div>
115+
</div>
116+
</div>
117+
118+
119+
</div>
120+
</div>
121+
122+
<div class="msf-navigation">
123+
<div class="row">
124+
<div class="col-md-3">
125+
<button type="button" data-type="back" class="btn msf-nav-button"><i class="fa fa-chevron-left"></i> Back </button>
126+
</div>
127+
128+
<div class="col-md-3 col-md-offset-6">
129+
<button type="button" data-type="next" class="btn msf-nav-button">Next <i class="fa fa-chevron-right"></i></button>
130+
131+
<button type="submit" data-type="submit" class="btn msf-nav-button">Submit</button>
132+
</div>
133+
134+
</div>
135+
</div>
136+
</form>
137+
138+
</div>
139+
</div>
140+
141+
142+
143+
144+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
145+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
146+
147+
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
148+
149+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
150+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
151+
152+
153+
<!-- Latest compiled and minified JavaScript -->
154+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
155+
crossorigin="anonymous"></script>
156+
<script src="/src/multi-step-form.js"></script>
157+
<script type="text/javascript">
158+
function ViewModel() {
159+
var self = this;
160+
161+
self.Name = ko.observable('');
162+
self.Email = ko.observable('');
163+
self.Details = ko.observable('');
164+
165+
self.AdditionalDetails = ko.observable('');
166+
self.availableTypes = ko.observableArray(['New', 'Open', 'Closed']);
167+
self.chosenType = ko.observable('');
168+
169+
self.availableCountries = ko.observableArray(['France', 'Germany', 'Spain', 'United States', 'Mexico']),
170+
self.chosenCountries = ko.observableArray([]) // Initially, only Germany is selected
171+
172+
173+
}
174+
175+
var viewModel = new ViewModel();
176+
177+
ko.applyBindings(viewModel);
178+
179+
180+
$(".msf:first").multiStepForm({});
181+
182+
</script>
183+
184+
185+
</body>
186+
187+
</html>

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "multi-step-form-js",
3-
"version": "0.0.7",
3+
"version": "0.0.8",
44
"description": "Multi Step Form with jQuery Validation",
55
"main": "index.js",
66
"keywords": [
7-
"multi",
7+
"multi",
88
"step",
99
"form",
1010
"jquery",
@@ -13,22 +13,22 @@
1313
"unobtrusive"
1414
],
1515
"scripts": {
16-
"test": "echo \"Error: no test specified\" && exit 1"
16+
"test": "echo \"Error: no test specified\" && exit 1",
17+
"demo": "http-server -c-1"
1718
},
1819
"repository": {
1920
"type": "git",
2021
"url": "https://github.com/mgildea/Multi-Step-Form-Js.git"
2122
},
22-
"author": "Matthew Gildea <mattgildea@hotmail.com> (https://github.com/mgildea)",
23+
"author": "Matthew Gildea <mattgildea@hotmail.com> (https://github.com/mgildea)",
2324
"license": "MIT",
2425
"bugs": {
2526
"url": "https://github.com/mgildea/Multi-Step-Form-Js/issues"
2627
},
2728
"homepage": "https://github.com/mgildea/Multi-Step-Form-Js",
2829
"dependencies": {
2930
"jquery": "^2.2.0",
30-
"jquery-validation":"^1.16",
31+
"jquery-validation": "^1.16",
3132
"jquery-validation-unobtrusive": "3.2.6"
3233
}
33-
34-
}
34+
}

‎src/multi-step-form.js

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616
factory(jQuery);
1717
}
18-
} (function ($) {
18+
}(function ($) {
1919

2020
"use strict";
2121

@@ -86,9 +86,7 @@
8686
"class": msfCssClasses.step,
8787
"display": "none"
8888
}));
89-
9089
}
91-
9290
}
9391

9492
$.each(form.views, this.initStep);
@@ -157,6 +155,14 @@
157155
else {
158156
form.submitNavButton.hide();
159157
form.nextNavButton.show();
158+
159+
$(this).find(':input').keypress(function (e) {
160+
if (e.which == 13) // Enter key = keycode 13
161+
{
162+
form.nextNavButton.click();
163+
return false;
164+
}
165+
});
160166
}
161167

162168

@@ -174,12 +180,7 @@
174180
$(element).removeClass(msfCssClasses.stepComplete);
175181
$(element).removeClass(msfCssClasses.stepActive);
176182
}
177-
178183
});
179-
180-
181-
182-
183184
});
184185

185186
$view.on('hide', function (e) {
@@ -191,7 +192,6 @@
191192
form.submitNavButton.hide();
192193
});
193194

194-
195195
view.init();
196196
});
197197

@@ -238,15 +238,4 @@
238238
return el.apply(this, arguments);
239239
};
240240
});
241-
}));
242-
/*
243-
244-
(function ($) {
245-
$.each(['show', 'hide'], function (i, ev) {
246-
var el = $.fn[ev];
247-
$.fn[ev] = function () {
248-
this.trigger(ev);
249-
return el.apply(this, arguments);
250-
};
251-
});
252-
})(jQuery);*/
241+
}));

0 commit comments

Comments
 (0)