How to check username without page loading

Getting Help Code Review
1

I want this kind of scenario:
When login button will be pressed, without page loading it will check for username in the database. If username can be found, password will be checked with page loading and do next depending on password matched/unmatched. But if username cannot be found, it will show an error message on the login page (under the username textbox).

I did this so far:

main.go

package main

import (
	"html/template"
	"fmt"
	"net/http"
	"github.com/gorilla/mux"
)

var tpl *template.Template

func init() {
	tpl = template.Must(template.ParseGlob("frontEnd/*.html"))
}

func Index(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/html")
	tpl.ExecuteTemplate(w, "index.html", nil)
}

func Login(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/html")
	tpl.ExecuteTemplate(w, "login.html", nil)
}
func LoginCheck(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/html")

	if r.Method != "POST" {
		http.Redirect(w, r, "/", http.StatusSeeOther)
		return
	}

	//username := r.FormValue("username")
	//password := r.FormValue("password")

	// Here checking will be done with database
}
func main() {
	r := mux.NewRouter()

	//just a message for ensuring that local server is running
	fmt.Println("Local Server is running...")

	//for serving perspective pages
	r.HandleFunc("/", Index)
	r.HandleFunc("/login", Login)
	r.HandleFunc("/loginCheck", LoginCheck)

	//for localhost server
	http.ListenAndServe(":8080", r)
}

login form:

<form class="loginForm" action="/loginCheck" method="POST">
    <h1>LOGIN</h1>
    <div>
        <input type="text" name="username" value="" placeholder="Username" required>
        <span class="err"></span>
    </div>
    <div>
        <input type="password" name="password" placeholder="Password" required>
        <span class="err"></span>
    </div>
    <div>
        <input type="submit" value="Login" name="">
    </div>
    <span><a href="/reset">Forgot Password?</a></span>
</form>

What should be the javascript code or what I need to do?

2

You could add an action to the template around your err span:

{{if .Err}}<span class="err">{{.Err}}</span>{{end}}

Then in LoginCheck:

var err error
// check if user exists in DB,
// set err if there's an error
// ...
tpl.ExecuteTemplate(w, "login.html", struct{ Err error}{ err })