| doctype html
html
    head
        title Form Validator
        meta(type="author", content="David Norminton")
        meta(name="viewport",content="width=device-width, initial-scale=1.0")
        link(rel="stylesheet", href="/css/style.css")
    body
        header
        h1 Example : using custom error / success messages
        #alert
        form#form-1(name="myForm", action="", method="POST")
            div
                label Email
                span.message
                input#email(type="email")
            div
                label Confirm Email 
                span.message
                input#email-check(data-vf="confirm", type="email")
            div
                label Date
                span.message
                input#check-date(type="date")
            div
                label Number
                span.message
                input#check-number(type="number")
            div
                label Url
                span.message
                input#check-url(type="url")
            input#form-submit(type="submit")
        script(src="/js/form-valid.js")
        script.
            ValidateForm.init('myForm')
                .setMsg( 'emailsMatch' , 'Good Match')
                .setMsg( 'emailsNoMatch', 'oops not the same')
                .setMsg( 'inValidEmail',  'What kind of email is that?')
                .setMsg( 'validEmail', 'I like that email')
                .setMsg( 'isNumber' , 'yup thats a number')
                .setMsg( 'isNotNumber', 'try entering a number instead')
                .setMsg( 'isNotDate', 'What kind of date is that')
                .setMsg( 'isDate', 'I remember that day well')
                .setMsg( 'isUrl', 'Valid url')
                .setMsg( 'isNotUrl', 'not sure thats a website')
            //ValidateForm.msgOff();
            //ValidateForm.tickCross('message');
            //ValidateForm.globalMsg('alert');
            //ValidateForm.debug('settings');
 |