Проверка формы Jquery с использованием объекта

Question

Я работаю с проверкой формы.Мой код работает нормально, но всякий раз, когда я нажимаю на кнопку подтверждения отправки, показывая несколько раз.И здесь я хочу добавить переключатель, флажок, выбрать в соответствии с моим кодом.Как мне добавить эти другие поля?Я старался изо всех сил, но не смог этого достичь.Может ли кто-нибудь помочь мне добавить это в другие поля?Ниже мой код:

    var Validator = function(formObject) {
        this.form = $(formObject);

        var Elements = {
            name: {
                reg: /^[a-zA-Z]{2,20}$/,
                error: "Not a valid name.",
            },

            email: {
                reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
                error: "Not a valid e-mail address.",
            },

            message: {
                reg: /^(?!\s*$).+/,
                error: "Message field cannot be empty.",
            },
        };

        var handleError = function(element, message) {
            element.addClass('input-error');
            var $err_msg = element.parent('div');
            var error = $('<div class="error"></div>').text(message);
            error.appendTo($err_msg);
            element.keyup(function() {
                $(error).fadeOut(1000, function() {
                    element.removeClass('input-error');
                });
            });

        };

        this.validate = function() {
        		var errorCount = 0;
            this.form.find("input, textarea").each(function(index, field){
                var type = $(field).data("validation");
                var validation = Elements[type];
                if (validation){
                    if (!validation.reg.test($(field).val())){
                    		errorCount++;
                        handleError($(field), validation.error);
                    }            
                }
            })
        		return errorCount == 0;
        };
    };

    $(function(){
        $("form#test").on("submit", function(event){
            //event.preventDefault();
            return new Validator(this).validate(); // "this" here refers to the form
            
        })
    })

<style type="text/css">

    body {
        background: #fff;
        color: #333;
        font: 76% Verdana, sans-serif;
    }

    form {
        margin: 1em 0 0 2em;
        width: 90%;
    }

    fieldset {
        margin: 0;
        border: 1px solid #ccc;
        padding-bottom: 1em;
    }

    legend {
        font-weight: bold;
        text-transform: uppercase;
    }


    label {
        float: left;
        width: 5em;
        padding-right: 2em;
        font-weight: bold;
    }
    div {
    	margin-bottom: 30px;
    }
    input {
        font: 1em Verdana, sans-serif;
    }

    fieldset ul li input {
        float: left;
        width: 120px;
        border: 1px solid #ccc;
    }

    textarea {
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        font: 1em Verdana, sans-serif;
    }

    form p {
        margin: 0;
        padding: 0.4em 0 0 7em;
    }

    form p input {
        background: #666;
        color: #fff;
        font-weight: bold;
    }


    div.error {
        clear: left;
        margin-left: 5.3em;
        color: red;
        padding-right: 1.3em;
        height: 100%;
        padding-bottom: 0.3em;
        line-height: 1.3;
    }

    .input-error {
        background: #ff9;
        border: 1px solid red;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="test">

    <fieldset>

    <legend>Contact information</legend>


    <div>
        <label for="name">Firstname:</label>
        <input type="text" name="firstname" id="firstname" data-validation="name" />
    </div>
    	

    <div>
        <label for="lastname">Lastname:</label>
        <input type="text" name="lastname" id="lastname" data-validation="name" />
    </div>

    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" data-validation="email"/>
        
    </div>

    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea>
    </div>

    <p><input type="submit" name="send" id="send" value="Send" /></p>

    </fieldset>


    </form>

Answer 1

<script>
jQuery(function() 
    {
        jQuery("#test").validate({
            rules:
               {
                "firstname":
                    {
                        required: true
                    },
                "lastname":
                    {
                        required: true
                    },
                "email":
                    {
                        required: true
                    },
                "message":
                    {
                        required: true
                    }
               }
    });
});

Answer 2

Пожалуйста, проверьте этот код:

https://codepen.io/creativedev/pen/BVNXYE

Я добавил эту строку

$err_msg.find('.error').remove();

Обновленный код:

var Validator = function(formObject) {
        this.form = $(formObject);

        var Elements = {
            name: {
                reg: /^[a-zA-Z]{2,20}$/,
                error: "Not a valid name.",
            },

            email: {
                reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
                error: "Not a valid e-mail address.",
            },

            message: {
                reg: /^(?!\s*$).+/,
                error: "Message field cannot be empty.",
            },
        };

        var handleError = function(element, message) {
            element.addClass('input-error');
            var $err_msg = element.parent('div');
            $err_msg.find('.error').remove();
            var error = $('<div class="error"></div>').text(message);
            error.appendTo($err_msg);
            element.keyup(function() {
                $(error).fadeOut(1000, function() {
                    element.removeClass('input-error');
                });
            });

        };

        this.validate = function() {
                var errorCount = 0;
            this.form.find("input, textarea").each(function(index, field){
                var type = $(field).data("validation");
                var validation = Elements[type];
                if (validation){
                    if (!validation.reg.test($(field).val())){
                            errorCount++;
                        handleError($(field), validation.error);
                    }            
                }
            })
                return errorCount == 0;
        };
    };

    $(function(){
        $("form#test").on("submit", function(event){
            //event.preventDefault();
            return new Validator(this).validate(); // "this" here refers to the form

        })
    })

Answer 3

всякий раз, когда я нажимаю на кнопку подтверждения отправки, показывающую несколько раз

$err_msg.empty(); /* add this cleanup old errors */
error.appendTo($err_msg);