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函数。

onsubmit表单标签中的验证功能

1 个答案: