[Kimchi-devel] [PATCH] Issue #317: disable storage pool create by default in UI

[Hongliang Wang]

On 05/14/2014 11:38 AM, shaohef at linux.vnet.ibm.com wrote:
> From: ShaoHe Feng <shaohef at 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 at 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--oldPropertyValue

> +        }
> +
> +    });
>   };
>
>   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>