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

Question

这是一个简单的代码。也许使用$（）。html（）或.text（）。 因为我刚接触到jquery所以plz是一个易于理解的代码。 尽管在以前的类似帖子上搜索，我仍然感到困惑。 我是否需要创建另一个js文件，或者我必须在现有的js文件中进行更改。 伙计们，如果可能，请提供一个jquery代码。

＆＃13;

＆＃13;

(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);

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

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;
    });
});