JQuery плагин проверки и Colorbox

Question

Я открытие как регистрационную форму и форму входа в модальном окне с помощью Colorbox

К сожалению, JQuery проверки штепсель не работает больше. Я сделал поиск и нашел кого-то question with the answer I needed here at Stack Overflow. Я не очень хорошо разбираюсь в JavaScript, но у меня была небольшая проблема с реализацией решения.

Я пробовал интерпретировать решения на своем коде, но не мог понять это. Мой код выглядит следующим образом:

$(document).ready(function(){ 
    $('.popup').colorbox(); 
    $('#register form').validate({ 
     rules: { 
      username: { 
       required: true, 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      password: { 
       minlength: 4, 
       required: true 
      }, 
      password2: { 
       equalTo: "#password" 
      } 
     }, 
     success: function(label) { 
      label.text('OK!').addClass('valid'); 
     } 
    }); 
    $('#login form').validate({ 
     rules: { 
      username: { 
       required: true 
      }, 
      password: { 
       required: true 
      } 
     } 
    }) 

; });

Может кто-нибудь прояснить, как я могу реализовать решение немного? Спасибо.

Answer 1

Я сделал некоторые выпучив мой сам, и я нашел это решение:

1. Убедитесь, что ваша форма имеет уникальный идентификатор.

2. После того как вы загрузили Async или заменить содержимое на странице, вы должны вызвать этот метод JQuery плагин:

   $ .validator.unobtrusive.addValidation ("# FormID");

Это удалит существующие атрибуты проверки и назначить новую один раз в указанной форме, или, если вы измените «#formID» в «форме», он будет делать, что для всех форм на странице.

Обязательно добавьте этот код в скрипт страницы:

// **************************** JQUERY PLUGIN ************************** 
// required for Unobtrusive JQuery Validation for Asynchronous data load 
// reference: http://www.mfranc.com/2011/07/04/unobtrusive-validation-in-partial-views/ 
// ********************************************************************* 
(function ($) { 
    $.validator.unobtrusive.addValidation = function (selector) { 
    //get the relevant form 
    var form = $(selector); 
    // delete validator in case someone called form.validate() 
    $(form).removeData("validator"); 
    $.validator.unobtrusive.parse(form); 
    }; 
})(jQuery); 
// ********************************************************************* 

Оригинальное решение с объяснением, можно найти здесь: http://www.mfranc.com/2011/07/04/unobtrusive-validation-in-partial-views/

Answer 2

Nevermind. Я понял. Похоже, мне не хватало фигурной скобки! Код вышел на:

$(document).ready(function(){ 
$('.colorbox').colorbox({onComplete:function(){ 
$('#register form').validate({ 
    rules: { 
     username: { 
      required: true, 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      minlength: 4, 
      required: true 
     }, 
     password2: { 
      equalTo: "#password" 
     } 
    }, 
    success: function(label) { 
     label.text('OK!').addClass('valid'); 
    } 
}); 
$('#login form').validate({ 
    rules: { 
     username: { 
      required: true 
     }, 
     password: { 
      required: true 
     } 
    } 
}); 
}}); 

});

Answer 3

Это моя реализация при использовании JQuery Validation плагина и Colorbox. Что я делаю, так это то, что сначала компилирую ошибки, а затем выводя их один раз в Colorbox.

var error_list = ''; 

// submit button 
jQuery("#continuebtn").click(function() { 
    error_list = ''; 
    jQuery('#orderPageForm').attr('action', '/submitquote.html'); 
    jQuery("#orderPageForm").submit(); 
}); 

jQuery(document).ready(function(){ 
    // validate form 
    jQuery("#orderPageForm").validate ({ 
     rules: { 
      width: { required: true, number: true, min: 1, max: 999 }, 
      height: { required: true, number: true, min: 1, max: 999 }, 
      folded_width: { required: true, number: true }, 
      folded_height: { required: true, number: true }, 
      stock: "required", 
      color: "required", 
      folding: "required", 
      quantity: { required: true, digit: true, min: 1, max: 100000 }, 
      turnaround: "required" 
     }, 

     messages: { 
      width: { 
       required: "Width is required.", 
       number: "Width value is not a number.", 
       min: "Minimum value for width is 1.", 
       max: "Maximum value for width is 999." 
      }, 
      height: { 
       required: "Height is required", 
       number:"Height value is not a number.", 
       min: "Minimum value for height is 1.", 
       max: "Maximum value for height is 999." 
      }, 
      folded_width: { 
       required: "Folded Width is required", 
       number:"Value is not a number." 
      }, 
      folded_height: { 
       required: "Folded Height is required", 
       number:"Value is not a number." 
      }, 
      stock: "Paper Type is required", 
      color: "Color is required", 
      folding: "Folding Type is required", 
      quantity: { 
       required: "Quantity is required", 
       number:"Quantity value is not a number.", 
       min: "Minimum value for quantity is 1.", 
       max: "Maximum value for quantity is 100000." 
      }, 
      turnaround: "Turnaround is required" 
     }, 

     errorPlacement: function(error, element) { 
      error_list += error.html() + '<br />'; 
      jQuery("#error_popup").html(error_list); 
      parent.jQuery.colorbox({width:"400px", inline:true, href:"#error_popup"}); 
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 
});