在提交时使用jquery在另一个div(Display)中显示表单值

Question

这是一个简单的代码。可能使用$（）.html（）或.text（）。由于我是jquery的新手，所以plz是一个易于理解的代码。尽管搜索了以前类似的帖子，我仍然感到困惑。我需要创建另一个js文件，还是必须对现有的js文件进行更改。如果可能的话，请提供一个jquery代码。

(function($, W, D {
    var JQUERY4U = {};
    JQUERY4U.UTIL = {
        setupFormValidation: function() {
            $("#form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    bio: "required",
                    password: {
                        required: true,
                        minlength: 5
                    },
                    passwordcp: {
                        equalTo: "#password"
                    }
                },
                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    passwordcp: "Password not matching",
                    email: "Please enter a valid email address",
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
})(jQuery, window, document);

HTML
<form action="" id="form" >
    <div class="formelement">
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" id="firstname"/>
    </div>
    <div class="formelement">
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname"/>
    </div>
    <div class="formelement">
        <label for="email">Email-ID</label>
        <input type="text" name="email"/>
    </div>
    
    <div class="formelement">
        <label for="bio">BIO</label>
        <textarea rows="3" cols="30" name="bio"></textarea>
    </div>
    
    <div class="formelement">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" />
    </div>
     
    <div class="formelement">
        <label for="passwordcp">Confirm-Password</label>
        <input type="password" name="passwordcp" id="passwordcp" />
    </div>
    
    <div class="formelement">
        <input type="submit" value="SUBMIT" class="submit"/>
    </div>
</form> 
<div class="display"></div>

Answer 1

我会这样做，在这里查看它的实际操作：http://jsfiddle.net/awsxtkd0/

    $(document).ready(function() {
        $("#form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    bio: "required",
                    password: {
                        required: true,
                        minlength: 5
                    },
                    passwordcp: {
                    equalTo: "#password"
                    }
                },
                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    passwordcp: "Password not matching",
                    email: "Please enter a valid email address",
                }
            });
    $('#form').submit(function() {
        if($('#form').valid()) {
            var str = '';
            str += $('#firstname').val() + '<br />';
            str += $('#lastname').val() + '<br />';
            str += $('#email').val() + '<br />';
            str += $('#bio').val() + '<br />';
            $('.display').append(str);
        }
        return false;
    });
});