9:38 p.m.
From: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
All button status of add/create pages should be consistent - it should
be disabled by default until the minimum of the required fields are
filled.
Signed-off-by: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.storagepool_add_main.js | 8 ++++++++
ui/pages/storagepool-add.html.tmpl | 2 +-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/ui/js/src/kimchi.storagepool_add_main.js
b/ui/js/src/kimchi.storagepool_add_main.js
index 86dbe7f..7bed152 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -145,6 +145,14 @@ kimchi.initStorageAddPage = function() {
$('#iscsiportId').keyup(function(event) {
$(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
});
+ $('#form-pool-add').change(function() {
+ if (kimchi.validateForm()) {
+ $('#pool-doAdd').removeAttr('disabled');
+ } else {
+ $('#pool-doAdd').attr('disabled', 'disabled');
+ }
+
+ });
};
kimchi.validateForm = function() {
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 977db66..7406bab 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -152,7 +152,7 @@
</div>
<footer>
<div class="btn-group">
- <button id="pool-doAdd" class="btn-normal">
+ <button id="pool-doAdd" class="btn-normal"
disabled="disabled">
<span
class="text">$_("Create")</span>
</button>
</div>
--
1.9.0
3:11 a.m.
Tested this patch and got issues below:
1. Once I input the storage pool name, an error message occurs which
looks like some request is sent.
2. The button is enabled only when the 'Storage Path' field lose focus.
it should bind to 'keyup' event to make the button enabled once
there is a valid input and disabled once user clear the path.
On 5/14/2014 11:38 AM, shaohef(a)linux.vnet.ibm.com wrote:
From: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
All button status of add/create pages should be consistent - it should
be disabled by default until the minimum of the required fields are
filled.
Signed-off-by: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.storagepool_add_main.js | 8 ++++++++
ui/pages/storagepool-add.html.tmpl | 2 +-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/ui/js/src/kimchi.storagepool_add_main.js
b/ui/js/src/kimchi.storagepool_add_main.js
index 86dbe7f..7bed152 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -145,6 +145,14 @@ kimchi.initStorageAddPage = function() {
$('#iscsiportId').keyup(function(event) {
$(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
});
+ $('#form-pool-add').change(function() {
+ if (kimchi.validateForm()) {
+ $('#pool-doAdd').removeAttr('disabled');
+ } else {
+ $('#pool-doAdd').attr('disabled', 'disabled');
+ }
+
+ });
};
kimchi.validateForm = function() {
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 977db66..7406bab 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -152,7 +152,7 @@
</div>
<footer>
<div class="btn-group">
- <button id="pool-doAdd" class="btn-normal">
+ <button id="pool-doAdd" class="btn-normal"
disabled="disabled">
<span
class="text">$_("Create")</span>
</button>
</div>
12:29 a.m.
On 05/14/2014 11:38 AM, shaohef(a)linux.vnet.ibm.com wrote:
From: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
All button status of add/create pages should be consistent - it should
be disabled by default until the minimum of the required fields are
filled.
Signed-off-by: ShaoHe Feng <shaohef(a)linux.vnet.ibm.com>
---
ui/js/src/kimchi.storagepool_add_main.js | 8 ++++++++
ui/pages/storagepool-add.html.tmpl | 2 +-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/ui/js/src/kimchi.storagepool_add_main.js
b/ui/js/src/kimchi.storagepool_add_main.js
index 86dbe7f..7bed152 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -145,6 +145,14 @@ kimchi.initStorageAddPage = function() {
$('#iscsiportId').keyup(function(event) {
$(this).toggleClass("invalid-field",!/^[0-9]+$/.test($(this).val()));
});
+ $('#form-pool-add').change(function() {
+ if (kimchi.validateForm()) {
validateForm() is
supposed to use when the form is being "submitted" to
do a fully validation of the form, instead of single form field.
To validate a single form field after user making some changes, I
suggest do the following:
$('input#some-field').on('propertychange input', function(event) {
if(regexp.match($(this).val())) {
// Do nothing
}
else {
// Warn user the format is invalid
}
});
Notice that we don't use onchange event here because onchange event
is only fired when the text box loses focus. So handlers will not be
called until you move focus away from this text box by pressing Tab Key
or clicking mouse to other fields.
Also notice that we listen to 2 events: propertychange and input.
Browsers(except IE) will fire input event every time the user
input/delete some character(s) in the text box so our handler can be
called immediately to determine whether to make the "Submit" Button
enabled. Though Microsoft claims IE9+ will fire input event, there is
some problem. When the user deletes some character(s) by pressing
backspace key or shortcut Ctrl + X, input event will not be fired in IE9
(quick verification can be done by writing a simple HTML file). For IE,
we listen to propertychange event to do the same handling.
IE propertychange event:
http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx
+
$('#pool-doAdd').removeAttr('disabled');
+ } else {
+ $('#pool-doAdd').attr('disabled',
'disabled');
jQuery recommends .prop() instead of .attr() for input
disabled/checked
properties.
The .prop() method should be used to set disabled and checked instead
of the .attr() method.
http://api.jquery.com/prop/#prop-propertyName-functionindex--oldPropertyV...
+ }
+
+ });
};
kimchi.validateForm = function() {
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 977db66..7406bab 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -152,7 +152,7 @@
</div>
<footer>
<div class="btn-group">
- <button id="pool-doAdd" class="btn-normal">
+ <button id="pool-doAdd" class="btn-normal"
disabled="disabled">
<span
class="text">$_("Create")</span>
</button>
</div>
3632
days inactive
3632
days old
2 comments
3 participants
participants (3)
-
Hongliang Wang -
shaohef＠linux.vnet.ibm.com -
Yu Xin Huo