Chia sẻ qua

Thêm JavaScript tùy chỉnh vào biểu mẫu

  • Bài viết

Cả bản ghi bước biểu mẫu cơ bản và biểu mẫu nhiều bước đều chứa trường có tên JavaScript tùy chỉnh có thể được sử dụng để lưu trữ mã JavaScript nhằm cho phép bạn mở rộng hoặc sửa đổi hiển thị trực quan hoặc chức năng của biểu mẫu.

Khối JavaScript tùy chỉnh sẽ được đưa vào phần cuối trang ngay trước phần tử thẻ biểu mẫu kết thúc.

Trường biểu mẫu

ID đầu vào HTML của một trường bảng được thiết lập thành tên lô-gic của thuộc tính. Dễ dàng chọn một trường, thiết lập giá trị hoặc các thao tác phía máy khách khác với jQuery

$(document).ready(function() {
   $("#address1_stateorprovince").val("Saskatchewan");
});

Quan trọng

Việc thêm cột lựa chọn vào biểu mẫu dựa trên mô hình sẽ được sử dụng trong bước biểu mẫu nhiều bước hoặc biểu mẫu cơ bản sẽ xuất hiện trên trang web dưới dạng điều khiển máy chủ thả xuống. Việc sử dụng JavaScript tùy chỉnh để thêm các giá trị bổ sung vào điều khiển đó sẽ dẫn đến thông báo “Đối số đăng lại hoặc gọi lại không hợp lệ” khi gửi trang.

Xác định trường phía máy khách bổ sung

Đôi khi bạn có thể cần phải tuỳ chỉnh để xác nhận các trường trên biểu mẫu. Ví dụ này buộc người dùng chỉ định một email chỉ khi trường khác đối với phương thức liên lạc ưu tiên được thiết lập về Email.

Lưu ý

Xác thực trường phía máy khách không được hỗ trợ trong lưới phụ.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "emailaddress1Validator";
         newValidator.controltovalidate = "emailaddress1";
         newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var contactMethod = $("#preferredcontactmethodcode").val();
            if (contactMethod != 2) return true; // check if contact method is not 'Email'.
            // only require email address if preferred contact method is email.
            var value = $("#emailaddress1").val();
            if (value == null || value == "") {
            return false;
            } else {
               return true;
            }
         };

         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);

      });
   }(window.jQuery));
}

Xác thực chung

Khi bấm vào nút Tiếp/Gửi, một hàm có tên entityFormClientValidate được thực thi. Bạn có thể mở rộng phương thức này để thêm lô-gic xác thực tùy chỉnh.

if (window.jQuery) {
   (function ($) {
      if (typeof (entityFormClientValidate) != 'undefined') {
         var originalValidationFunction = entityFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            entityFormClientValidate = function() {
               originalValidationFunction.apply(this, arguments);
               // do your custom validation here
               // return false; // to prevent the form submit you need to return false
               // end custom validation.
               return true;
            };
         }
      }
   }(window.jQuery));
}

Xem thêm