Is it possible to show loading icon/gif?

Getting Help
1

Hi

After user filled the form, it is sent to Golang api server. The frontend is also using Golang.
Now, If I use javascript to validate the form, and submit the form using javascript only, I can’t do the validation in Golang.

Whatever the data is, the api server has to validate and process it.

I prefer converting the form to a model and validating the data in server side. Later passing that to api server.

While waiting for the response from api, can I show any loading using Golang.
The browser control is completely in the hand of javascript. If I do validation in Golang frontend server, how can I do that javascript loading/hiding part?

2

I do not completely understand your question. But there is a way to hide show html on-the-fly.

  1. Fetch the template with or without data
  2. Render html template into buffer and save into html body
  3. Get the rendered html and save into innerHTML div

The Javascript part that handles 1 and 3

// fetch data and populate a <div id="subcnt"><div>
function get_rec(id) {
  let url = "/" + module + "/view/" + id
  fetch(url, {
    headers: {
      "Content-Type": "application/json"
    },
    credentials: "same-origin"
  })
    .then((res) => res.text())
    .then((response) => {
      document.getElementById("subcnt").innerHTML = response;
    })
    .catch((error) => alert("Error get_rec:", error));
}

The Go part that render page and (if needed) fetches the data from API or similar:

// write rendered html into buffer (html body)
func get_card(w http.ResponseWriter, module string, mode string, val string) {
	page := module + "_" + mode //add + .html if needed
	fmt.Println(page)
	data := json2map4id(module, val)
	var buf bytes.Buffer
	tpl.ExecuteTemplate(&buf, page, data)
	fmt.Fprint(w, buf.String())
}
2 Likes
3

“Content-Type”: “application/json”
Can we still send html?

Here you have used javascript.
I have a form in which I am getting user details. Personal info. I validate them in javascript.

Now I have two option.
I can send the form to api server using javascript itself.
Or I can send the form to frontend to validate again.

If I choose javascript, I can’t validate it with Golang. It will be sent over. But I can show the loading until I get the result/response back from api.

If I choose Golang to validate, I can’t show the loading. Until the result is back, a white page will be shown. Is it possible to show any loading on that white page…?

4

You want a response in JSON format. If there is no response from Go, you can omit this.

The validation can be done in three places. Browser, Go server or in the database.

If you validate using Go, you have the option to pre-validate the input both by HTML and Javascript.

The main advantage do the API calls in Go, is that the API call is more “hidden” (read safer) than you use Javascript to send the form.

If you use your own Go API, it should take less than one or two seconds to transfer to the database. If it takes longer, find the bottlenecks and fix them.

If you use a foreign slow API, you may inform the user in some way.

If you are using Go for validation you send an url + JSON to a Go endpoint using fetch(). Go can then send a response of the API back to browser. While you are waiting for this respons you can do what ever you want to inform the user within the fetch function.

My approach is to split the validation between HTML, Go and the database. I don’t use Javascript to validate if I can avoid it. Validate where it performs the best. But my goal is to always use Go to communicate with the API.

I am not a friend of or that familiar with Javascript. So I asked chatGPT how to send a message to innerHTML while waiting for response. This means that the form is replaced with the desired content as soon as you hit the Send button. I cannot confirm that it works, but give it a try…

function get_rec(id) {
  let loadingMessage = "Loading..."; // Customize the loading message here
  document.getElementById("subcnt").innerHTML = loadingMessage;

  let url = "/" + module + "/view/" + id;
  fetch(url, {
    headers: {
      "Content-Type": "application/json"
    },
    credentials: "same-origin"
  })
    .then((res) => res.text())
    .then((response) => {
      document.getElementById("subcnt").innerHTML = response;
    })
    .catch((error) => {
      document.getElementById("subcnt").innerHTML = "An error occurred.";
      console.error("Error get_rec:", error);
    });
}
1 Like
5

I don’t use Javascript to validate if I can avoid it. Validate where it performs the best. But my goal is to always use Go to communicate with the API.

In these cases, We can’t use the above javascript. Is that right?

let loadingMessage = "Loading..."; // Customize the loading message here
  document.getElementById("subcnt").innerHTML = loadingMessage;
6

Maybe you have to modify some lines, but the principle is the same.

The main difference is that you call the API with url directly to the API or via an endpoint in the Go server.

Another difference is that using Javascript you sometimes fill an existing form. While using Go as in my example you fetch a complete form together with data in one single step.

Something like:

  1. fetch() from somewhere (direct or indirect)
  2. wait for the response (inform the user if the process is slow)
  3. manage the response (fill the innerHTML or form)
7

If you want to show a loading icon/gif you by definition have to do it client-side (in Javascript). So something like this might work where you submit your form with js but set some sort of loading indicator:

function submitMyForm() {
   // Set loading indicator 
   document.getElementById('loadingIndicator').innerHTML += 'Loading...';
   // Submit form
   document.getElementById("myForm").submit();
}

I generally have client and server-side validations because it is not a great user experience to submit a form when I know it’s invalid only to round-trip and display errors. For example if it’s a login form and email/password are both blank I don’t even need to send that to the server to see that it’s invalid. However, you must validate on the server because you can’t trust values submitted by a client.

1 Like
8

Here is a live example of form created using Go. My API response is within fractions of a second, so I have not implemented the “Loading…”. But I can create an error that mimics the loading “error”.

1 Like
9

For a Golang backend and frontend setup, while server-side validation in Golang ensures data integrity, client-side interactivity, like showing a loading spinner, still relies on JavaScript. Upon form submission, use JavaScript to display a loading spinner. Send form data to the Golang frontend for validation. Once validated and a response is received, JavaScript hides the spinner and displays the result.

10

One more question regarding this.

I have the following setup.

Go web server (handing templates)
Go api server (handling database requests)

Now I have implemented validation in javascript as well as go web server.
If javascript is disabled, only web server validation is happening.
If javascript is enabled, javascript as well as web server validation is happening.

After submitting the form, again validation is happening in the api server.
So three times I have to do the validation for same data.

  1. Can I skip the go web server validation and just do it in the api only? (I think it is bad idea)
    2.Should I have a common validation server (web server and api server can use that (not javascript)) ? which will just return boolean and error?

or is it waste of time and waste of network requests?

11

It depends what you want to validate. But my rule of thumb is to validate one thing once. And do the validation where it make sense. Validate as early as possible. Start with HTML validation at form level.

And validation information (error) in wrong place, can be frustrating for the user.

  1. Pre-validate using HTML.

  2. No or only basic Javascript validation. I do avoid to use Javascript at browser level for validation. But this is a personal preference.

  3. Most of the validation in the Go server before sending to API.

  4. No or minor validation in API server. Search for duplicates or similar task that involves database connection may be an exception.

  5. Final minor validations in database (built in test for unique id etc)

1 Like
12

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.