Xác nhận Jquery, submithandler không hoạt động

Question

Tôi đang cố gắng thực hiện một số kiểm tra bổ sung và định dạng trên các trường nhất định trong biểu mẫu của tôi trước khi gửi. Do đó tôi đã sử dụng plugin xác nhận jquery bassistance. Nó hoạt động tốt vì nó hiển thị tất cả các thông báo lỗi manadatory đúng cách, tuy nhiên ngay sau khi tôi cung cấp các giá trị cần thiết, biểu mẫu chỉ đơn giản là gửi. Tại thời điểm này tôi thậm chí không chắc chắn nếu submitHandler thậm chí còn được kích hoạt. Ý tưởng nào?

Form html: http://jsfiddle.net/7PAZU/

$(function() { 
    $("#commentForm").validate({ 
     rules: { 
      bill_first_name: { 
       required: true 
      }, 
      bill_last_name: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      Phone: { 
       required: true, 
       number: true 
      }, 

      bill_address_one: { 
       required: true 
      }, 
      bill_city: { 
       required: true 
      }, 
      bill_state_or_province: { 
       required: true 
      }, 
      charge_total: { 
       required: true, 
       float: true 
      }, 
     }, 
     messages: { 
      bill_first_name: { 
       required: "Please put in First Name" 
      }, 
      bill_last_name: { 
       required: "Please put in last Name" 
      }, 
      email: { 
       required: "Please enter a valid email" 
      }, 
      phone: { 
       required: "Please enter a valid Phone Number" 

      }, 

      bill_address_one: { 
       required: "Please put in Address" 
      }, 
      bill_city: { 
       required: "Please put in City" 
      }, 
      bill_state_or_province: { 
       required: "Please put in state" 
      }, 
      charge_total: { 
       required: "Please put Amount In Whole number such as 10.00", 
       number: "Please put in Amount In Whole number such as 10.00" 
      }, 
     }, 
     submitHandler: function(frm) { 
      $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); 
      alert("Dukhche Na"); 
      return false; 
     } 
    }); 
})​ 

Answer 1

Mã của bạn là không bởi vì bạn đang sử dụng một quy tắc xác nhận rằng không tồn tại.

charge_total: { 
       required: true, 
       float: true // there's no validator named `float` 
      } // Comma removed here 

Nhưng không có trình xác thực tên là float trong plugin đó. Loại bỏ nó và nó sẽ hoạt động tốt. Bạn có thể tạo tùy chỉnh float trình xác thực nếu muốn.

Working Fiddle

Kiểm tra danh sách các quy tắc có sẵn ở đây http://docs.jquery.com/Plugins/Validation#Validator

Làm thế nào tôi đã tìm thấy điều này?

Tôi đã kiểm tra giao diện điều khiển và phát hiện lỗi này bị ném

Uncaught TypeError: Cannot call method 'call' of undefined 

Từ dòng sau trong file nguồn Plugin

var result = $.validator.methods[method] 
     .call(this, element.value.replace(/\r/g, ""), element, rule.parameters); 

Nghĩa $.validator.methods[method] là undefined đó chứng minh rằng bạn đang sử dụng một trình kiểm tra mà không tồn tại.

Vì vậy, tôi đã kiểm tra danh sách phương thức xác thực có sẵn và your rules và thấy rằng bạn đang sử dụng quy tắc float không khả dụng. Vì vậy JS đang ném lỗi này và dừng thực thi, do đó, submit handler của bạn không được gọi và biểu mẫu đang được gửi (Hành vi mặc định là gì trừ khi bạn ngăn chặn việc đó bằng cách sử dụng JS).

Answer 2

IE là đặc biệt kén chọn bằng dấu phẩy thêm ... loại bỏ chúng cho một sự khởi đầu:

$(function() { 
    $("#commentForm").validate({ 
     rules: { 
      bill_first_name: { 
       required: true 
      }, 
      bill_last_name: { 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      Phone: { 
       required: true, 
       number: true 
      }, 

      bill_address_one: { 
       required: true 
      }, 
      bill_city: { 
       required: true 
      }, 
      bill_state_or_province: { 
       required: true 
      }, 
      charge_total: { 
       required: true, 
       float: true 
      } // Comma removed here 
     }, 
     messages: { 
      bill_first_name: { 
       required: "Please put in First Name" 
      }, 
      bill_last_name: { 
       required: "Please put in last Name" 
      }, 
      email: { 
       required: "Please enter a valid email" 
      }, 
      phone: { 
       required: "Please enter a valid Phone Number" 

      }, 

      bill_address_one: { 
       required: "Please put in Address" 
      }, 
      bill_city: { 
       required: "Please put in City" 
      }, 
      bill_state_or_province: { 
       required: "Please put in state" 
      }, 
      charge_total: { 
       required: "Please put Amount In Whole number such as 10.00", 
       number: "Please put in Amount In Whole number such as 10.00" 
      } // Comma removed here 
     }, 
     submitHandler: function(frm) { 
      $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2)); 
      alert("Dukhche Na"); 
      return false; 
     } 
    }); 
})​