HTML5 Pop使用Javascript表單驗證

Question

我想收到錯誤消息，以在HTML5字段中顯示，類似於此<input type="text" name="name" required="required">

以下是javascript：

<html>
<head>


    <title>the man</title>

</head>
<body>
<script src="jquery-2.2.0.min.js"></script>
    <script>
        $(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('<p>ID number does not appear to be authentic - input not a valid number</p>');
                    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)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
                    error.append('<p>ID number does not appear to be authentic - date part not valid</p>');
                    correct = false;
                }

                // get the gender
                var genderCode = idNumber.substring(6, 10);
                var gender = parseInt(genderCode) < 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 < 13; ++i) {
                    tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
                    if (tempTotal > 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('<p>ID number does not appear to be authentic - check digit is not valid</p>');
                    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('<p>South African ID Number:   ' + idNumber + '</p><p>Birth Date:   ' + fullDate + '</p><p>Gender:  ' + gender + '</p><p>SA Citizen:  ' + citzenship + '</p>');
                }
                // otherwise, show the error
                else {
                    error.css('display', 'block');
                }

                return false;
            }

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

            $('#idCheck').submit(Validate);
        });
    </script>




    <div id="error"></div>

    <form id="idCheck">
    <p>Enter the ID Number: <input id="idnumber" /> </p>
        <p> <input type="submit" value="Check" /> </p>
    </form>

    <div id="result"> </div>
    </body>
</html>

Answer 1

嘗試： $('#idCheck').submit(Validate());

似乎您正在閱讀函數的定義而不是執行。

Answer 2

您沒有<div id="error"></div> CSS樣式，因此無法將錯誤顯示為彈出窗口。 試試一些jQuery插件，例如Bootstrap Tooltip

對於簡單的錯誤示例css，您可以嘗試將一些行插入html並運行

#error {
    display: block;
    border: 1px solid red;
    position: absolute;
    top: 34px;
    left: 152px;
    background: #fff;
}

</style>

HTML5 Pop使用Javascript表單驗證

問題描述

2 個解決方案

解決方案1
0 2016-02-20 07:18:00

解決方案2
0 2016-02-20 07:23:24

HTML5 Pop使用Javascript表單驗證

問題描述

2 個解決方案

解決方案1 0 2016-02-20 07:18:00

解決方案2 0 2016-02-20 07:23:24

解決方案1
0 2016-02-20 07:18:00

解決方案2
0 2016-02-20 07:23:24