Plain HTML5 form test

try to show all errors as list, or highlight all errors red on pressing submit with js help, but html5 form validate if js switched off.

by Ben Clayton

HTML

<form id='Form1' method="post">
    
    <div id='message'></div>
    <label>Forename*:</label><input type="text" name="forename" placeholder="Forename" required /><br/>
    <label>Surname*:</label><input type='text' name="surname" placeholder="surname" required /><br/>
    <label for="1234567">Sex*: </label>
        <div class="chkwrapper">
            <input type="radio" id="gen1" name="sex" required value="male" /><label for="gen1" class="radio">Male</label>
            <input type="radio" id="gen2" name="sex" required value="female" /><label for="gen2" class="radio">Female</label>
        </div>
    <br/>
           
    <label>Email*:</label><input type='email' name="email" placeholder="[email protected]" required /><br/>
    <label>DOB:</label><input type='text' name="dob" placeholder="dd/mm/yyyy" required pattern="\d{1,2}/\d{1,2}/\d{4}"/><br/>

    <label>House No.:</label><input type='text' name="housenum" /><br/>
    
    <label>Phone:</label><input type='text' name="phone" pattern="^[0-9 ]+$" /><br/>
 
    
    <i>* Required</i><br>
    <input  type='submit' value="Submit" />
</form>

CSS

body{line-height:26px;padding:30px;}

#message {
    padding:20px;
    border:1px solid red;
    background-color:#FFF0F0;
    display:none;
    margin-bottom:10px;
}
.submit {margin-top:20px;}

label {min-width:80px;display:inline-block;}
label.radio {min-width:40px;display:inline-block;}

.chkwrapper {display:inline-block;padding:0px;}

.highlightform input:required:invalid,
.highlightfield input:focus:invalid,
.chkwrapper.invalid:after
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
   background-color:#FFF0F0;
    background-position: right top;
    background-repeat: no-repeat;
  }

.chkwrapper.invalid:after
{
    content:'\2002';
    display:inline-block;
    width:20px;
}

.chkwrapper.invalid
{
   background-color:#FFF0F0;
}


.highlightform  input:required:valid, .highlightfield  input:focus:valid {
    background-image:...

JavaScript

function validateForm(event) {
    //alert('hi');
    var form = document.getElementById("Form1");
    var str=[];
    var formvalid=true;
    var firstbad=null;
    for (f = 0; f < form.elements.length; f++) {
        // get field
        field = form.elements[f];
        if(field.name){
            var v=true;
            if(field.checkValidity){
                v=field.checkValidity();
            }
            if(!v){
                formvalid=false;firstbad=firstbad || field;
                // 'field.validity' is an object with many properties giving fail reason
                str[field.name]="field <b>"+field.name+"</b> "+vmsg(field.validity);
                if(field.type=='radio' || field.type=='checkbox'){
                    $(field).parent().addClass('invalid');   
                }
            }
        }
    }
    
    if (!formvalid) {
        var s='';
        for(var p in str){s+=str[p]+"<br/>"}
        $("#message").html(s).show();
        $("#Form1").addClass('highlightform highlightfield');
        firstbad.focus();
        if (event.preventDefault) event.preventDefault();
    }else{
        $("input[type=submit]").disable()   
    }
    return formvalid;
}

function vmsg(v){
    if (v.valueMissing) return "must be completed";
    if (v.typeMismatch) return "is not completed correctly";
    return "is invalid";
}

$(document).ready(function(){
    var form = document.getElementById("Form1");
    
    // Stop HTML5 restricting form submission with its own test
    form.noValidate = true;
    
    // Run our own JS check instead
    form.onsubmit = validateForm;
});