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

Question

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

К сожалению, плагин проверки jQuery больше не работает. Я выполнил поиск и нашел кого-то вопрос с ответом, который мне нужен здесь, в переполнении стека . Я еще не очень хорошо разбираюсь в 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

Это моя реализация при использовании плагина 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();
        }
    });
});

Answer 3

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
        }
    }
});
}});

});