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>