[Kimchi-devel] [PATCH v2] Create pool UI: making 'Create' button disable when forms not filled.

[Aline Manera]

Ops... the button never becomes enable even when all fields have inputs.

On 06/16/2014 02:30 PM, Daniel Barboza wrote:
> From: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
>
> Making the 'Create' button in storagepool_add enable only when
> all form fields are filled, just like other kimchi forms.
>
> Signed-off-by: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.storagepool_add_main.js | 60 +++++++++++++++++++++-----------
>   ui/pages/storagepool-add.html.tmpl       |  2 +-
>   2 files changed, 40 insertions(+), 22 deletions(-)
>
> diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
> index 0f3df32..23c8b27 100644
> --- a/ui/js/src/kimchi.storagepool_add_main.js
> +++ b/ui/js/src/kimchi.storagepool_add_main.js
> @@ -20,6 +20,18 @@ kimchi.storagepool_add_main = function() {
>       kimchi.initStorageAddPage();
>       $('#form-pool-add').on('submit', kimchi.addPool);
>       $('#pool-doAdd').on('click', kimchi.addPool);
> +    // 'pool-doAdd' button starts as disabled.
> +    $("#pool-doAdd").button();
> +    $("#pool-doAdd").button("disable");
> +    // Make any change in the form fields enables the
> +    // 'pool-doAdd' button if all the visible form
> +    // fields are filled, disables it otherwise.
> +    $('#form-pool-add').on('input change propertychange', function() {
> +        if (!kimchi.inputsNotBlank())
> +            $("#pool-doAdd").button("disable");
> +        else
> +           $("#pool-doAdd").button("enable");
> +    });
>   };
>
>   kimchi.initStorageAddPage = function() {
> @@ -75,7 +87,7 @@ kimchi.initStorageAddPage = function() {
>           value : "scsi"
>       } ];
>       $('#poolTypeId').selectMenu("setData", options);
> -
> +
>       kimchi.getStorageServers('netfs', function(data) {
>           var serverContent = [];
>           if (data.length > 0) {
> @@ -147,13 +159,35 @@ kimchi.initStorageAddPage = function() {
>       });
>   };
>
> +/* Returns 'true' if all form fields were filled, 'false' if
> + * any field is left blank. The function takes into account
> + * the current poolType selected.
> + *
> + * Any 'field is blank' verification that were done in other
> + * validate functions were deleted, since we're doing it here
> + * already.
> + */
> +kimchi.inputsNotBlank = function() {
> +    if (!$('#poolId').val()) return false;
> +    var poolType = $("#poolTypeInputId").val();
> +    if (poolType === "dir") {
> +        if (!$('#pathId').val()) return false;
> +    } else if (poolType === "netfs") {
> +        if (!$('#nfspathId').val()) return false;
> +        if (!$('#nfsserverId').val()) return false;
> +    } else if (poolType === "iscsi") {
> +        if (!$('#iscsiserverId').val()) return false;
> +        if (!$('#iscsiTargetId').val()) return false;
> +    } else if (poolType === "logical") {
> +        if ($("input[name=devices]:checked").length === 0)
> +            return false;
> +    }
> +    return true;
> +};
> +
>   kimchi.validateForm = function() {
>       var name = $('#poolId').val();
>       var poolType = $("#poolTypeInputId").val();
> -    if ('' === name) {
> -        kimchi.message.error.code('KCHPOOL6001E');
> -        return false;
> -    }
>       if (name.indexOf("/")!=-1) {
>           kimchi.message.error.code('KCHPOOL6004E');
>           return false;
> @@ -173,10 +207,6 @@ kimchi.validateForm = function() {
>
>   kimchi.validateDirForm = function () {
>       var path = $('#pathId').val();
> -    if ('' === path) {
> -        kimchi.message.error.code('KCHPOOL6002E');
> -        return false;
> -    }
>       if (!/(^\/.*)$/.test(path)) {
>           kimchi.message.error.code('KCHAPI6003E');
>           return false;
> @@ -190,10 +220,6 @@ kimchi.validateNfsForm = function () {
>       if (!kimchi.validateServer(nfsserver)) {
>           return false;
>       }
> -    if ('' === nfspath) {
> -        kimchi.message.error.code('KCHPOOL6003E');
> -        return false;
> -    }
>       if (!/((\/([0-9a-zA-Z-_\.]+)))$/.test(nfspath)) {
>           kimchi.message.error.code('KCHPOOL6005E');
>           return false;
> @@ -207,18 +233,10 @@ kimchi.validateIscsiForm = function() {
>       if (!kimchi.validateServer(iscsiServer)) {
>           return false;
>       }
> -    if ('' === iscsiTarget) {
> -        kimchi.message.error.code('KCHPOOL6007E');
> -        return false;
> -    }
>       return true;
>   };
>
>   kimchi.validateServer = function(serverField) {
> -    if ('' === serverField) {
> -        kimchi.message.error.code('KCHPOOL6008E');
> -        return false;
> -    }
>       if(!kimchi.isServer(serverField)) {
>           kimchi.message.error.code('KCHPOOL6009E');
>           return false;
> diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
> index e6b1fd6..2ddc088 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 ui-button-primary">
>                       <span class="text">$_("Create")</span>
>                   </button>
>               </div>