jquery xác nhận vị trí

Question

Tôi đang cố gắng sử dụng tính năng xác thực jquery. Theo ví dụ: http://docs.jquery.com/Plugins/Validation hoạt động tốt và tôi muốn tạo lại bằng mã của tôi. Tuy nhiên tôi không biết phải gọi nó ở đâu.

Điều tôi có là bảng html được tạo và khi bạn nhấp vào nút "Chỉnh sửa" cho bất kỳ hàng nào, nó sẽ mở ra một biểu mẫu. Tôi muốn xác thực biểu mẫu này với jquery. Tôi tin rằng nó đang làm việc nhưng khi tôi nhấn gửi vào mẫu tôi ẩn các hình thức vì vậy tôi không bao giờ có thể nhìn thấy công việc xác nhận ... Tôi nghĩ.

tôi tạo ra các hình thức với javascript và nút gửi trông như thế này:

var mysubmit = document.createElement("input"); 
mysubmit.type = "submit"; 
mysubmit.name = "Submit"; 
mysubmit.value = "Apply" 
mysubmit.onclick = function() { 
    //return formSubmitactivecameras(); 
js("#EditCameraForm").validate(); 
    this.form.submit(); 
}; 
myform.appendChild(mysubmit); 

này hầu như không có đủ thông tin nên tôi có tất cả các mã trong fiddle này: http://jsfiddle.net/UtNaa/36/. Tuy nhiên tôi không thể có vẻ để có được fiddle để làm việc khi bạn nhấp vào nút Edit. Mà mở ra một hình thức mà tôi muốn xác nhận.

Tôi không chắc chắn xác thực có thực sự hoạt động hay không. Có lẽ nó là nhưng khi bạn nhấn nút gửi trên biểu mẫu, biểu mẫu ẩn. Một lần nữa fiddle không hoạt động để hiển thị biểu mẫu nhưng nó hoạt động cho tôi trên trang web của tôi. Hy vọng rằng mã trong đó sẽ ít nhất giúp đỡ.

Answer 1

về cơ bản bạn cần thêm xác nhận trên mỗi phần tử bằng cách gọi nó bằng cách thêm

myinput.className = "required"; // add this line 

sau đó nối tất cả các yếu tố của bạn đầu tiên TRƯỚC KHI bạn áp dụng xác thực

hoặc bằng cách thêm quy tắc

js("#EditCameraForm").validate(); 
     rules: { 
      camera_name: { 
       required: true, 
       minlength: 50, 
       maxlength: 10 
      }, 
}; 

trong ví dụ này nó sẽ yêu cầu đầu vào với tối đa là 50 char và min 10

bạn cũng có thể thêm xác nhận tùy chỉnh bằng cách sử dụng addMethod TRƯỚC KHI bạn có thể xác nhận

$.validator.addMethod("alphanum", function(value, element) { 
    return this.optional(element) || /^[a-z0-9]+$/i.test(value); 
}, "This field must contain only letters and numbers."); 

js("#EditCameraForm").validate(); 
     rules: { 
      camera_name: { 
       required: true, 
       alphanum: true, 
       minlength: 50, 
       maxlength: 10 
      }, 
}; 

sau đó khi biểu mẫu sẽ gửi khi bạn nhấn nút gửi nhưng không đặt ẩn trong đó chỉ cần đưa vào trình xử lý của trình xác nhận hợp lệ

js("#EditCameraForm").validate(); 
    rules: { 
     camera_name: { 
      required: true, 
      minlength: 50, 
      maxlength: 10 
     } 
    }, 
    submitHandler: function() { 
     // do stuff once form is valid but before it is sent 
    } 
}; 

Dưới đây là một ví dụ về cách áp dụng thông điệp tùy chỉnh, điều này sẽ đi vào sau khi quy tắc

messages: { 
    email: { 
     required: 'Enter this!' 
    } 
} 

l

Answer 2

Vấn đề là biểu mẫu không biết những trường biểu mẫu nào được cho là chứa.

Kiểm tra lại tài liệu và các ví dụ. Rõ ràng bạn có thể sử dụng tên lớp và các thuộc tính tùy chỉnh để cấu hình trình xác nhận hợp lệ. Ngoài ra, bạn có thể $ .rule() để thêm các quy tắc vào biểu mẫu.

Ví dụ: đặt tên trường máy ảnh được yêu cầu bằng cách thêm lớp 'bắt buộc' vào đầu vào tên.

var myinput = document.createElement("input"); 
myinput.name="camera_name"; 
myinput.value=cameraname; 
myinput.id="CameraName"; 
myinput.className = "required"; // add this line 
myform.appendChild(myinput); 

Ngoài ra, thay đổi nút gửi onClick handler

//submit changes button 
var mysubmit = document.createElement("input"); 
mysubmit.type = "submit"; 
mysubmit.name = "Submit"; 
mysubmit.value = "Apply" 
mysubmit.onclick = function() { 
    //return formSubmitactivecameras(); 
    js("#EditCameraForm").validate() 
    //this.form.submit(); // This isn't needed, the form will be submitted when this function ends 
}; 
myform.appendChild(mysubmit); 

Answer 3

Bạn phải thay đổi khung về phía bên tay trái của jsFiddle để "không bọc (đầu) "và JavaScript của bạn sẽ bắt đầu hoạt động. Đây là fiddle thay đổi. http://jsfiddle.net/UtNaa/39/

Tuy nhiên, mã của bạn không hoạt động vì thiếu các phần tử trong mã HTML. Có lẽ sau khi thêm các phần khác của mã nó có thể bắt đầu làm việc, nếu không nó sẽ dễ dàng hơn để gỡ lỗi.

Answer 4

Chưa kiểm tra phần xác thực vì điều này đã được trả lời. Nhưng bạn thực sự có thể sử dụng một sự dọn dẹp nhỏ bé trong mã của bạn mà tôi tin.

Thanh toán phương pháp viết lại này: http://jsfiddle.net/UtNaa/40/

---

Cố định lỗi với các sự kiện nút: http://jsfiddle.net/UtNaa/42/