HTML5 Pop using Javascript form validation
<p>I would like to get the error message to display the in an HTML5 field pop up similar to this<code>&lt;input type="text" name="name" required="required"&gt;</code> </p>

<p>The following is the javascript:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;


    &lt;title&gt;the man&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;script src="jquery-2.2.0.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function() {

            function Validate() {
                // first clear any left over error messages
                $('#error p').remove();

                // store the error div, to save typing
                var error = $('#error');

                var idNumber = $('#idnumber').val();


                // assume everything is correct and if it later turns out not to be, just set this to false
                var correct = true;

                //Ref: http://www.sadev.co.za/content/what-south-african-id-number-made
                // SA ID Number have to be 13 digits, so check the length
                if (idNumber.length != 13 || !isNumber(idNumber)) {
                    error.append('&lt;p&gt;ID number does not appear to be authentic - input not a valid number&lt;/p&gt;');
                    correct = false;
                }

                // get first 6 digits as a valid date
                var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));

                var id_date = tempDate.getDate();
                var id_month = tempDate.getMonth();
                var id_year = tempDate.getFullYear();

                var fullDate = id_date + "-" + id_month + 1 + "-" + id_year;

                if (!((tempDate.getYear() == idNumber.substring(0, 2)) &amp;&amp; (id_month == idNumber.substring(2, 4) - 1) &amp;&amp; (id_date == idNumber.substring(4, 6)))) {
                    error.append('&lt;p&gt;ID number does not appear to be authentic - date part not valid&lt;/p&gt;');
                    correct = false;
                }

                // get the gender
                var genderCode = idNumber.substring(6, 10);
                var gender = parseInt(genderCode) &lt; 5000 ? "Female" : "Male";

                // get country ID for citzenship
                var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";

                // apply Luhn formula for check-digits
                var tempTotal = 0;
                var checkSum = 0;
                var multiplier = 1;
                for (var i = 0; i &lt; 13; ++i) {
                    tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
                    if (tempTotal &gt; 9) {
                        tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));
                    }
                    checkSum = checkSum + tempTotal;
                    multiplier = (multiplier % 2 == 0) ? 1 : 2;
                }
                if ((checkSum % 10) != 0) {
                    error.append('&lt;p&gt;ID number does not appear to be authentic - check digit is not valid&lt;/p&gt;');
                    correct = false;
                };


                // if no error found, hide the error message
                if (correct) {
                    error.css('display', 'none');

                    // clear the result div
                    $('#result').empty();
                    // and put together a result message
                    $('#result').append('&lt;p&gt;South African ID Number:   ' + idNumber + '&lt;/p&gt;&lt;p&gt;Birth Date:   ' + fullDate + '&lt;/p&gt;&lt;p&gt;Gender:  ' + gender + '&lt;/p&gt;&lt;p&gt;SA Citizen:  ' + citzenship + '&lt;/p&gt;');
                }
                // otherwise, show the error
                else {
                    error.css('display', 'block');
                }

                return false;
            }

            function isNumber(n) {
                return !isNaN(parseFloat(n)) &amp;&amp; isFinite(n);
            }

            $('#idCheck').submit(Validate);
        });
    &lt;/script&gt;




    &lt;div id="error"&gt;&lt;/div&gt;

    &lt;form id="idCheck"&gt;
    &lt;p&gt;Enter the ID Number: &lt;input id="idnumber" /&gt; &lt;/p&gt;
        &lt;p&gt; &lt;input type="submit" value="Check" /&gt; &lt;/p&gt;
    &lt;/form&gt;

    &lt;div id="result"&gt; &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>