Vugu form validation demo part 1

README.md

Vugu Form Validation Demo #1

This is a little experiment using vugu. For now, it just changes a field's label to its contents when you hit submit.

In part 2, there will be some more practical validation work.

devserver.go

// +build ignore

package main

import (
	"log"
	"net/http"
	"os"

	"github.com/vugu/vugu/simplehttp"
)

func main() {
	wd, _ := os.Getwd()
	l := "127.0.0.1:8844"
	log.Printf("Starting HTTP Server at %q", l)
	h := simplehttp.New(wd, true)
	// include a CSS file
	simplehttp.DefaultStaticData["CSSFiles"] = []string{"/master.css"}
	log.Fatal(http.ListenAndServe(l, h))
}

master.css

:root{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.text-field {
    padding: 3px;
}  
    .text-field input {
       border-radius: 10px;
       border: 2px solid dodgerblue;
       height: 1.4em;
       padding: .2em;
    }

root.vugu

<div class="root">
    <div vg-if='data.isUpdating'>Loading...</div>
    <div vg-if='data.isUpdating == false'>
        <form @submit='data.OnSubmit(event)'>
            <div>
             <text-field vg-for='i := 0; i < 2; i++' 
                 :name="data.Fields[i].Name" :contents="data.Fields[i].Contents">
         </div>
         <input type="submit" value="Submit">
        </form>
    </div>
</div>


<script type="application/x-go">

import "syscall/js"
import "log"

type RootData struct { 
    Fields []TextFieldData 
    isUpdating bool
}

func (comp *Root) NewData(props vugu.Props) (interface{}, error) { 
  ret := &RootData{}
  ret.Fields = []TextFieldData{{"", "First Name"}, {"", "Last Name"}}
  ret.isUpdating = false
  return ret, nil
}

func (data *RootData) OnSubmit(event *vugu.DOMEvent){ 
    log.Printf("event: %v", event)
    event.PreventDefault()
    data.isUpdating = true
    js.Global().Get("console").Call("log", "Submitted") //kept for reference
    for i := 0; i < len(data.Fields); i++ {
        data.Fields[i].Contents = js.Global().Get("document").Call("getElementById", data.Fields[i].Name + " contents").Get("value").String()
        log.Printf("Reading data: " + data.Fields[i].Name)
        log.Printf("Contents: " + data.Fields[i].Contents)
        js.Global().Get("document").Call("getElementById", data.Fields[i].Name + " label").Set("innerHTML", data.Fields[i].Contents)
    }
    data.isUpdating = false
}

</script>

text-field.vugu

<div class="text-field" :id="data.Name">
    <span vg-html='data.Name' :id='data.Name + " label"'></span>
   <input :id='data.Name + " contents"' type="text" :name='data.Name' :value='data.Contents'>   
</div>

<script type="application/x-go">

type TextFieldData struct { 
    Contents string
    Name string
}


func (comp *TextField) NewData(props vugu.Props) (interface{}, error) { 
  ret := &TextFieldData{}
  ret.Contents, _ = props["contents"].(string)
  ret.Name, _ = props["name"].(string)
  return ret, nil
}

</script>