HTML, CSS, JavaScript
Validation in Javascript for required fields how to return screen back to original condition
Gravatar is a globally recognized avatar based on your email address. Validation in Javascript for required fields how to return screen back to original condition
  Roy Miller
  All
  Jan 20, 2020 @ 04:12pm

Listmates,

I'm using javascript in conjunction with jquery to validate that fields have been filled in with information. Works wonderful.

However, when the user hit's the save button there are couple of actions that is taken in javascript.

function processing() {
	$('.saveeditbuttons').hide();
	var thisdiv = '.processingmsg';
	$(thisdiv).css({ "position": "absolute", "top": "170px", left: ($(window).width() - $(thisdiv).outerWidth())/2, });
	Move = $(thisdiv).detach()
	$('body').append(Move);			
	$(thisdiv).show();
	$("form").submit();
}

I am hiding the save/edit buttons then showing the working GIF.

I'm using jquery.validate.min.js to validate that mandatory fields are filled in. If not, then return back to the form.

The problem I'm having is the "working.gif" is still showing itself and the save edit buttons are not visible.

Any ideas how to get the form to a) turn of the gif and b) reshow the save/edit buttons.

Thanks in advance.

Gravatar is a globally recognized avatar based on your email address. re: Validation in Javascript for required fields how to return screen back to original condition
  Rick Strahl
  Roy Miller
  Jan 21, 2020 @ 12:23pm

So if it works you submit which reloads the form - so that should just work. If it doesn't work then you need to basically reverse all those changes with showing the animated gif and buttons etc.

Ideally create a function:

function validating(reset) {

  if (!reset) {
     // hide buttons, show gif
  }
  else {
     // show buttons, hide gif
  }
}

and then call that function at the appropriate moments.

FWIW, for this sort of thing VueJs works very nice as you can store your field model data and easily set various states and affect behavior just by setting a few properties on your model.

Another tip: Rather than an animated Gif use a FontAwesome icon:

<a class="fa fa-circle-notch-o fa-spin"></i>

Should look like this:

and gives you a spinning icon.

Gravatar is a globally recognized avatar based on your email address. re: Validation in Javascript for required fields how to return screen back to original condition
  Roy Miller
  Roy Miller
  Jan 21, 2020 @ 02:05pm

Thanks Rick for the help.

© 1996-2020