javascript - onsubmit 表单标签中的验证函数

Question

我有一个关于表单验证的问题。当我点击“Valider”按钮时，功能验证似乎不起作用。

这是 html:

<form method='POST' action='newcustomer.php' id='registerform' class='formulaire'  onsubmit="return validation();" >

    <p>
    <label for='firstname'>First Name</label>
    <input type='text' id ='firstname' name='firstname' placeholder='First Name' class='text' />
    </p>

    <p>
    <label for='lastname'>Last Name</label>
    <input type='text' id ='lastname' name='lastname' placeholder='Last Name' class='text' />
    </p>

    <p>
    <label for='age'>Age</label>
    <input type='number' id='age' name='age' placeholder='Age' class='text' min='5' max='99'/>
    </p>

    <p>
    <label for='email'>Email</label>
    <input type='text' id='email' name='email' placeholder='Email' class='text' />
    </p>

    <p>
    <label for='password'>Password</label>
    <input type='password' id='password' name='password' size='35' placeholder='Password' class='text' />
    </p>

    <p>
    <input type='submit' value='Valider' id='registerbutton'/>
    </p>
</form>

这是 Javascript:

$(document).ready(
    function () {
    $('#firstname').keyup( function() {
        checkfname();
    });

    $('#lastname').keyup( function() {
        checklname();
    });

    $('#age').keyup( function() {
        checkage();
    });

    $('#email').keyup( function() {
        checkemail();
    });

    $('#password').keyup( function() {
        checkpassword();
    });

    function checkfname() {
        $('span.error-firstname').remove();
        var inputVal = $('#firstname').val();
        var numericReg = /^[A-Za-z éàèïöäëüâêôûî]+$/;
        if(!numericReg.test(inputVal)) {
            $('#ok1').animate({opacity: 0}, {duration: 200});
            $('#ko1').animate({opacity: 1}, {duration: 200});
            $('#firstname').after('<span class="error error-firstname">Name contains only letters</span>');
            return false;
        } else {
            $('#ko1').animate({opacity: 0}, {duration: 200});
            $('#ok1').animate({opacity: 1}, {duration: 200});
            return true;
        }
    }

    function checklname() {
        $('span.error-lastname').remove();
        var inputVal = $('#lastname').val();
        var numericReg = /^[A-Za-z éàèïöäëüâêôûî]+$/;
        if(!numericReg.test(inputVal)) {
            $('#ok2').animate({opacity: 0}, {duration: 200});
            $('#ko2').animate({opacity: 1}, {duration: 200});
            $('#lastname').after('<span class="error error-lastname">Name contains only letters</span>');
            return false;
        } else {
            $('#ko2').animate({opacity: 0}, {duration: 200});
            $('#ok2').animate({opacity: 1}, {duration: 200});
            return true;
        }
    }

    function checkage() {
        $('span.error-age').remove();
        var inputVal = $('#age').val();
        var numericReg = /^[0-9]{1,}$/;
        if(!numericReg.test(inputVal)) {
            $('#ok3').animate({opacity: 0}, {duration: 200});
            $('#ko3').animate({opacity: 1}, {duration: 200});
            $('#age').after('<span class="error error-age">Enter a valid age (between 5 and 99)</span>');
            return false;
        } else {
            $('#ko3').animate({opacity: 0}, {duration: 200});
            $('#ok3').animate({opacity: 1}, {duration: 200});
            return true;
        }
    }

    function checkemail() {
        $('span.error-email').remove();
        var inputVal = $('#email').val();
        var numericReg = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
        if(!numericReg.test(inputVal)) {
            $('#ok4').animate({opacity: 0}, {duration: 200});
            $('#ko4').animate({opacity: 1}, {duration: 200});
            $('#email').after('<span class="error error-email">Enter a valid Email</span>');
            return false;
        } else {
            $('#ko4').animate({opacity: 0}, {duration: 200});
            $('#ok4').animate({opacity: 1}, {duration: 200});
            return true;
        }
    }

    function checkpassword() {
        $('span.error-password').remove();
        var inputVal = $('#password').val();
        var numericReg = /^[a-z0-9_-]{6,18}$/;
        if(!numericReg.test(inputVal)) {
            $('#ok5').animate({opacity: 0}, {duration: 200});
            $('#ko5').animate({opacity: 1}, {duration: 200});
            $('#password').after('<span class="error error-password">The password must contain a letter, a number and at least 6 characters</span>');
            return false;
        } else {
            $('#ko5').animate({opacity: 0}, {duration: 200});
            $('#ok5').animate({opacity: 1}, {duration: 200});
            return true;
        }
    }

    function validation() {
        var bfname = checkfname();
        var blname = checklname();
        var bage = checkage();
        var bmail = checkemail();
        var bpassword = checkpassword();

        if (bfname == true && blname == true && bage == true && bmail == true && bpassword == true){

            return true;
        }
        else {
            return false;
        }
    }
}

问题是没有在表单标签的 onsubmit 参数上调用验证函数。我尝试放置一个错误窗口以查看是否调用了该函数，但从未显示该消息。

您认为问题出在哪里？

Answer 1

好吧，我在 2 周前遇到了同样的错误。您需要从 .ready() 函数中推迟验证函数。否则，您应该在 .ready() 函数中的元素表单上使用 .sumbit() jquery 函数。