在提交时使用jquery在另一个div（display）中显示表单值

Question

这是一个简单的代码。 也许使用$（）。html（）或.text（）。 由于Iam是jquery的新手，因此请编写易于理解的代码。 尽管搜索以前的类似帖子，我仍然感到困惑。 我需要创建另一个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;
    });
});