提交表单标签中的验证功能

Validation function in onsubmit form tag

本文关键字:验证 功能 表单 标签 提交      更新时间:2023-09-26

我对表单的验证有问题。当我单击"验证器"按钮时,功能验证似乎不起作用。

这是 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 参数上调用验证函数。我试图放置一个错误窗口以查看是否调用了该函数,但消息从未显示。

你认为问题出在哪里?

好吧,

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