JQuery динамическая проверка

Question

Привет! Я пытаюсь сделать несколько вещей с плагином проверки jQuery и, кажется, застрял в одном месте.

Вот код:

<script type="text/javascript">
    $(document).ready(function(){
        $('#myform').validate();
        $('#email').rules('add', {required: true, messages: {required: 'email is required'}} );
        $('#phone').rules('add', {required: true, messages: {required: 'phone is required'}} );
        $('#validate').click(function(){
            $('#result').text($('#myform').validate().form());
            return false;
        });
    });
</script>
<form id="myform">
<div>email:<input type="text" id="email" /></div>
<div>phone:<input type="text" id="phone" /></div>
<div id="result"></div>

<input id="valdate" type="image" src="images/submit.png" />
</form>

В результате я получаю неправильное сообщение об ошибке. Если я нажимаю кнопку «Отправить», рядом с полем ввода электронной почты отображается «телефон требуется», а «требуется электронная почта» вообще не отображается.

Что не так с этим кодом?

Answer 1

ОК. Кажется, я нашел проблему.

У вас ЕСТЬ для добавления атрибута ИМЯ к элементам в любом случае. В моем примере, если вы добавите подходящие имена для элементов ввода, это будет хорошо работать.

Answer 2

Вы можете рассмотреть что-то вроде ниже. Это немного понятнее для чтения и отладки. Поскольку вы используете стандартные правила, такие как «обязательный», вам не нужно указывать сообщение, если вы не хотите что-то другое. Правила и сообщения идентифицируются по имени поля ввода (например, электронной почты).

Параметр errorPlacement - это место, где вы указываете местоположение сообщений. Вам не нужно включать эту опцию; по умолчанию добавляется сообщение в поле ввода. Но если у вас есть макеты div или вам нужна специальная позиция для сообщения на радиобоксы, или что у вас есть, это место, чтобы сделать это.

$(document).ready(function(){ 
    $('#myform').validate({ 
      rules:{
        email: "required", 
        phone: {required:true, minlength:7}
      },
      messages:{ //not required as default message for "required" rule makes same text
        email: "email is required", 
        phone: "phone is required",
      },
      errorPlacement: function(error, element) { //this is where to put positioning rules
        error.appendTo(element.parent()); //just an example
      }
   });
});

Answer 3

Следующий подход:

<script type="text/javascript">
    $(function(){
        $('#myform').validate({
            rules: {
                phone: 'required',
                email: 'required'
            },
            messages: {
                phone: 'phone is required',
                email: 'email is required'
            }
        });
    });
</script>

вместе с добавлением атрибута name к каждому полю ввода, работает отлично.

Answer 4

Попробуйте сначала добавить правила, а затем вызвать $ ('# myform'). Validate ()

Это не будет работать.Сначала вы должны вызвать метод validate.

Используя метод ввода имен

Я знаю, что могу сделать это, используя имена, как вы упоминали выше.Но, к сожалению, мне придется использовать идентификаторы.

содержимое не будет постоянным.Это будет варьироваться в зависимости от некоторых правил.В результате почти каждый раз у меня будет другая страница.Будет много элементов управления с разными идентификаторами.много групп проверки и т. д.

Так что использование «подхода с именами» просто не отвечает моим требованиям.

Есть мысли о том, как использовать подход $ (селектор) .rules ('добавить') ??

PS Я нашел следующий пример http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation, и он работает довольно хорошо, и в коде нет ничего особенного.