Validation function in onsubmit form tag

Question

I have a problem regarding the validation of a form. It seems like the function validation is not working when I click on the "Valider" button.

Here is the 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>

And here is the 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;
        }
    }
}

The problem is that the validation function is not called on the onsubmit parameter of the form tag. I tried to put an error window to see if the function was called but the message is never displayed.

Where do you think the problem comes from ?

Answer 1

Well I had the same error 2 weeks ago. You need to put off your validation functions from .ready() function. Otherwise, you should use .sumbit() jquery function on the element form in your .ready() function.