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