2014-01-12 75 views
0

我想驗證表單並使用Bootstrap 3彈出來通知用戶無效的表單數據。我有處理驗證下面的JavaScript代碼:獲取Bootstrap 3 popover與jQuery驗證

$(document).ready(function() { 
    $('#signup').validate({ 
     rules: { 
      signup_email: { 
       required: true, 
       maxlength: 45 
      }, 
      signup_password: { 
       required: true, 
       minlength: 8 
      }, 
      'signup[confirm_password]': { 
       required: true, 
       equalTo: "#signup_password" 
      } 
     }, 
     messages: { 
      signup_email: { 
       required: "Please enter your email address", 
       maxlength: "Your email address is too long!" 
      }, 
      signup_password: { 
       required: "Please enter a password", 
       minlength: "Your password must be at least 8 characters long." 
      }, 
      'signup[confirm_password]': { 
       required: "Please retype your password", 
       equalTo: "Passwords do not match!" 
      } 
     }, 
     errorElement: 'span', 
     errorClass: 'error', 
     validClass: 'success', 
     highlight: function(element, errorClass) { 
      $(element).popover('show'); 
     }, 
     unhighlight: function(element, errorClass) { 
      $(element).popover('hide'); 
     }, 
     errorPlacement: function(err, element) { 
      err.hide(); 
     }}); 
    $('#signup_email').popover({ 
     placement: 'below', 
     offset: 20, 
     trigger: 'manual' 
    }); 
    $('#signup_password').popover({ 
     placement: 'below', 
     offset: 20, 
     trigger: 'manual' 
    }); 
    $('#signup_confirm_password').popover({ 
     placement: 'below', 
     offset: 20, 
     trigger: 'manual' 
    }); 
}); 

和下面的HTML表單:

<input type="email" id="signup_email" name="signup[email]" required="required" class="form-control" placeholder="Email" rel="popover" />   
<input type="password" id="signup_password" name="signup[password]" required="required" class="form-control" placeholder="Password" rel="popover" />   
<input type="password" id="signup_confirm_password" name="signup[confirm_password]" required="required" class="form-control" placeholder="Retype Password" rel="popover" /> 
<button type="submit" id="signup_send" name="signup[send]" class="btn btn-default">Let&#039;s go.</button> 

當我提交表單,確認工作正常,但顯示沒有popovers。有誰知道可能是什麼原因造成的?

回答

0
'signup[confirm_password]': { 
      required: true, 
      equalTo: "#signup_password" 
     } 

'signup[confirm_password]': { 
      required: "Please retype your password", 
      equalTo: "Passwords do not match!" 
     } 

註冊[confirm_password]應該是signup_confirm_password。