Callback not working correctly.

StackOverflow https://stackoverflow.com/questions/23576527

Pregunta

I'm using validate.js and I'm attempting to display the specific errors, rather just one general error message. But I just can't get the errors to display. They work fine via console on whether or not there is an error, but when we get down to the specific error it doesn't work. Here's the code I have so far 

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="validate.js"></script>
</head>

<body>
    <form name="form1" action="#" method="post">
        <input type="text" name="name" placeholder="Name">
        <br>
        <input type="text" name="email" placeholder="Email">
        <br>
        <input type="password" name="password" placeholder="Password">
        <br>
        <input type="submit" value="Submit">
    </form>
    <script>
        var validator = new FormValidator('form1', [{
            name: 'name',
            display: 'required',
            rules: 'required'
        }, {
            name: 'email',
            rules: 'valid_email'
        }, {
            name: 'password',
            rules: 'required'
        }], function (errors, event) {
            if (errors.length > 0) {
                var errorString = '';

                for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
                    errorString += errors[i].message + '<br />';
                }

                el.innerHTML = errorString;
            }
        });
    </script>
</body>

</html>

Any ideas?

¿Fue útil?

Solución

I have done two things here. Firstly the plugin needs be attached to the form after page load. This is done by wrapping the code in the following:

window.onload = function(){
 // existing code goes here
}

I have also added a div with an id of "errors" then populate this with the following:

document.getElementById("errors").innerHTML = errorString;

I have also separated the validation rules into a separate variable (optional). I have attached the complete code again for your review.

Thanks

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="validate.min.js"></script>

</head>

<body>
    <div id="errors"></div>

    <form name="myform" action="#" method="post">
        <input type="text" name="name" placeholder="Name">
        <br>
        <input type="text" name="email" placeholder="Email">
        <br>
        <input type="password" name="password" placeholder="Password">
        <br>
        <input type="submit" value="Submit">
    </form>

    <script>

    window.onload = function(){

        var rules = [
            {
                name: 'name',
                display: 'required',
                rules: 'required'
            },
            {
                name: 'email',
                rules: 'valid_email'
            },
            {
                name: 'password',
                rules: 'required'
            }
        ];

        var validator = new FormValidator('myform', rules, function (errors, event) {
            if (errors.length > 0) {
                var errorString = '';

                for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
                    errorString += errors[i].message + '<br />';
                }

                document.getElementById("errors").innerHTML = errorString;
            }

        });
    }
    </script>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top