HTML5 Submission

In this example below you will see how to do a HTML5 Submission with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lastwizard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lastwizard ©
  • HTML
  • CSS
  • JavaScript
        
<body onload="init()">


<form name="form">
    <legend>Register</legend>
    <fieldset>
        <label>Username: <input type="text" name="username" /><highlight>*Required</highlight></label>
        <label>Password: <input type="password" name="password" /></label>
        <label>Re-type Password: <input type="password" name="password" /></label>
        <label>Name: <input type="text" name="Name" /></label>
        <label class="grid-2">Age: <select><option>18</option><option>19</option></select></label>
        <label class="grid-2">Gender: <input type="radio" name="gender" value="Female"/><input type="radio" name="gender" value="Male" /></label>

        <!--<label>Birth: <input type="date" name="birth" /></label>-->
        <label>Birth: <input type="text" name="birth" /></label>
        <label>Cellphone: <input type="text" name="phone" /></label>
        <label>Hobbies: <input type="checkbox" name="hobby" value="ball1" /><input type="checkbox" name="hobby" value="ball2" /><input type="checkbox" name="hobby" value="ball3" /><input type="checkbox" name="hobby" value="ball4" /></label>

        <label for="description">Description</label><span data-role="word-count">0/140</span>
        <textarea id="description" name="description" placeholder="Please enter the description"></textarea>

        <input type="reset" value="reset" />
        <input type="submit" value="submit" />

    </fieldset>
</form>




    

/*Downloaded from https://www.codeseek.co/lastwizard/html5-submission-kKhAE */
            *{ margin:0; padding:0 }
        form { display: block; width: 600px; margin:auto; background:rgb(52,152,215) }

        label{ width: 100%; display: block; padding: 1% }
        input{ float: right: width: 360px }
    

/*Downloaded from https://www.codeseek.co/lastwizard/html5-submission-kKhAE */
        <script>

    function init(){
        document.form.onsubmit = testSubmit;
        function testSubmit(){

             if(test(this.form)){
                 alert("success");
                 return true;
             }
            else{
                 alert("fail");
                 return false;
             }

        }




        function test(form){
            var error = [];

            //test username;(NOT EMPTY VALIDATION)
            var username = document.getElementsByName("username")[0].value;
            var check_username = /^$|^\s+$/;
            if(check_username.test(username)){
                error.push("Username is required!");
            }

            //test if two passwords are the same;(PASSWORD VALIDATION; NOT INCLUDED REQUIRED)
            var password1 = document.getElementsByName("password")[0].value;
            var password2 = document.getElementsByName("password")[1].value;
            if(password1 != password2){
                error.push("Password should be the same!");
            }

            //test name;(NAME VALIDATION)
            var name = document.getElementsByName("Name")[0].value;
            var check_name = /^[A-Z][a-z]+\s[A-Z][a-z]+$/;
            if(!check_name.test(name)){
                error.push("Name is invalid!");
            }

            //test age;(SELECT TAG VALIDATION)
            var select = document.getElementsByTagName("select")[0];
            var age = select.options[select.selectedIndex].text;
            if(age <= 18){
                error.push("Age is not illegal for this site!");
            }

            //test gender;(RADIO BUTTON VALIDATION, choose one of radio buttons)
            function validateRadios(radios){
                for(var i = 0; i < radios.length; i++)
                {
                    if(radios[i].checked) return true;
                }
                return false;
            }
            if(!validateRadios(document.forms["form"]["gender"])){
                error.push("Please choose your gender!");
            }

            //test hobbies;(CHECKBOX VALIDATION; checked two of checkboxes)
            function validateCheckbox(checkbox){
                var count = 0;
                for(var i = 0; i < checkbox.length; i++){
                    if(checkbox[i].checked) count++;
                }
                return (count >= 2);
            }
            if(!validateCheckbox(document.forms["form"]["hobby"])){
                error.push("Choose at least two!");
            }

            //test cellphone;(PHONE FORMATE: XXX-XXX-XXXX, XXX.XXX.XXXX, XXX XXX XXXX)
            var phone = document.getElementsByName("phone")[0].value;
            var stripped = phone.replace(/[\(\)\.\-\ ]/g, '');
            if(!(stripped.length == 10)){
                error.push("Invalidate cellphone number.")
            }

            //test birthday using regex and javascript;
            var birthday = document.getElementsByName("birth")[0].value;
            var check_birthday = /^(0[1-9]|1[012])[ -/]?(0[1-9]|[12][0-9]|3[01])[ -/]?[0-9]{4}$/;
            if(!check_birthday.test(birthday)){
                error.push("Invalid birthday");
            }
            else{
                var stripped = birthday.replace(/[\-\ \\]/g,'');
                var array1 = ["04","06","09","11"];
                var month = stripped.substr(0,2);
                var day = stripped.substr(2,2);
                if(array1.indexOf(month) > -1 && day == "31"){
                     error.push("Invalid birthday");
                }
                else if(month == "02" && day > "28"){
                    error.push("Invalid birthday");
                }
            }




            if(error.length > 0){
                for(var i = 0; i < error.length; i++){
                    console.log(error[i]);
                }
                return false;
            }
            return true;

        }

        //word count;
        var ele = document.getElementsByName("description")[0];
        ele.addEventListener("keyup",function(){
            var count = document.getElementsByTagName("span")[0];

            count.innerHTML = this.value.length + "/100";
        }, true);
    }




</script>
    

Comments