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

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(a)linux.vnet.ibm.com&gt; > > 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(a)linux.vnet.ibm.com&gt; > --- > 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>