2015-09-21 21 views
7

Tôi không biết tại sao tôi đã nhận được lỗi này khi tôi thay đổi mã thành php (từ html). khi phần mở rộng của file là html, mã đang làm việc tốtKhông thể đọc cài đặt 'thuộc tính' không xác định khi tôi nhấp vào nút gửi

<?php?> 
<html lang="en"> 
<head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <link rel="stylesheet" href="css/manual.css"> 
     <!-- Optional theme --> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 


     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> 

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
     <title>Register</title> 
</head> 

<body> 

     <nav class="navbar navbar-default" id="navBar"> 

     </nav> 

     <div class="full"> 
       <div class="col-xs-12"> 
         <!--Side Bar--> 
         <div class="col-xs-3" id="navSide"> 
         </div> 

         <div class="col-xs-6" id="signUpForm"> 

           <h1>Register Page</h1> 
           <form role="form" id="signUpForm"> 
             <div class="form-group"> 
               <div class="form-inline spacer-12"> 
                 <input type="text" class="form-control" name="userFirstname" placeholder="First Name"> 
                 <input type="text" class="form-control" name="userLastName" placeholder="Last Name"> 

               </div> 
             </div> 

             <div class="form-group ">  

               <input type="text" class="form-control" 
               name="userEmail" 
               placeholder="Email"> 
             </div> 

             <div class="form-group "> 
               <input type="password" class="form-control" name="userPassword" placeholder="Password"> 
             </div> 

             <div class="form-group "> 
               <input type="password" class="form-control" name="confirmPassword" placeholder="Password"> 
             </div> 

             <div class="form-group "> 
                <label> Birthday* </label> 
                <input type="date" class="form-control" name="userBirthday" placeholder="Birthday"> 

             </div> 
             <input type="submit" class="btn btn-info spacer-12" style="clear:both" > 


           </form> 



         </div> 
       </div> 
     </div> 


     <script src="js/startup.js"></script> 
     <script src="js/signup.js"></script> 

</body> 
</html> 

<?php?> 

thì đây là mã xác nhận jquery tôi

$(document).ready(function(){ 
    $('#signUpForm').validate({ 
     errorElement: "span", 
     errorClass: "help-block", 
     rules:{ 
      userFirstName:{ 
       required: true 
      }, 
      userLastName:{ 
       required: true 
      }, 
      userEmail:{ 
       required: true 
      }, 
      userPassword:{ 
       required: true 
      }, 
      confirmPassword:{ 
       required: true 
      }, 
      userBirthday:{ 
       required: true 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     }, 
     highlight: function(element) { 

     $(element).closest('.form-group').addClass('has-error').addClass('red-border'); 
     }, 
     unhighlight: function(element) { 
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border'); 
     } 
    }); 
}); 

Mã này gây ra lỗi khi tôi nhấp vào nút gửi (JQuery Validate của router Loại lỗi: Không thể đọc cài đặt thuộc tính 'không xác định) Nhưng lỗi tạm thời và sẽ biến mất sau một thời gian.

Trả lời

16

Bạn đã xác định hai id có cùng tên, trong khi id phải là duy nhất.

<div class="col-xs-6" id="signUpForm"> 
<form role="form" id="signUpForm"> 

Cố gắng loại bỏ id từ <div class="col-xs-6" id="signUpForm">

+1

sai lầm ngu ngốc, làm cách nào để kiểm tra xem có 2 id trong cùng một biểu mẫu không? –

+1

sử dụng bộ chọn 'id' như vậy' console.log ($ ('[id = "signUpForm"]'). Chiều dài); ' –

+0

okay cảm ơn norli..i sẽ chấp nhận câu trả lời của bạn sớm, nó vẫn khó nếu chúng ta cần để kiểm tra tất cả các id từng cái một haha ​​ –

1

Chú ý hai điều

1. Xác định chức năng Jquery

bao gồm các chức năng của jQuery!

(function($) { 

// Bắt đầu Script

// endscript/

})(jQuery); 
  1. Thay đổi Id Mẫu vì nó làm mâu thuẫn giữa Form Id Id và Div

<form role="form" id="signUpForm1"> // include 1 in previous form id

Và đặt id này vào kịch bản

$('#signUpForm1').validate({ // put the Id in the script 

Hy vọng Nhiệm vụ của bạn sẽ thành công.

1

Để thêm một chi tiết nhỏ ở đây, tôi đã gặp sự cố tương tự với trình chọn thời gian giao diện người dùng jQuery và cũng do id không phải là duy nhất.

Trong trường hợp của tôi, đó là vì tôi đã lấy yếu tố gốc từ mẫu - sao chép nó cho cửa sổ bật lên. Kết quả là, nội dung của cửa sổ đều có id trùng lặp.

workaround bình thường của tôi cho rằng là để thay thế này:

$('#foo').bar(); 

với điều này:

myPopupWindow.find('#foo').bar(); 

Đó hoạt động khá tốt cho hầu hết mọi thứ, nhưng không phải cho bảng chọn thời gian.Đối với điều đó, tôi đã thực hiện điều này:

myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag); 
myPopupWindow.find('#foo_' + someUniqueTag).timepicker(); 

trong đó someUniqueTag là id kỷ lục, số ngẫu nhiên hoặc một số chuỗi khác biệt khác. Điều này giải quyết nó khá độc đáo đối với tôi.

Các vấn đề liên quan