On 05/14/2014 11:38 AM, shaohef@linux.vnet.ibm.com wrote:
From: ShaoHe Feng <shaohef@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@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--oldPropertyValu...
+ } + + }); };
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>