2013-11-21 4 views
0

Я использую плагин проверки JQuery и имеет несколько форм, которые требуют различных правил, но вместо того, выписывая тот же код еще раз, как показано нижеПопытки реорганизовать этот код

if (jQuery().validate) { 
    var removeSuccessClass = function(e) { 
     $(e).closest('.form-group').removeClass('has-success'); 
    } 

    $('#validation-form').validate({ 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-block', // default input error message class 
     errorPlacement: function(error, element) { 
      if(element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
     }, 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: ":hidden:not(.chosen)", 

     invalidHandler: function (event, validator) { //display error alert on form submit    

     }, 

     highlight: function (element) { // hightlight error inputs 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group 
     }, 

     unhighlight: function (element) { // revert the change dony by hightlight 
      $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group 
      setTimeout(function(){removeSuccessClass(element);}, 3000); 
     }, 

     submitHandler: function(form){ 
      $('#save').hide(); 
      $('#saving').show(); 
      form.submit(); 
     } 
    }); 

    $('#validation-form-pdf-word').validate({ 
     rules: { 
      file: { 
       extension: "pdf|doc|docx" 
      } 
     }, 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-block', // default input error message class 
     errorPlacement: function(error, element) { 
      if(element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
     }, 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: ":hidden", 

     invalidHandler: function (event, validator) { //display error alert on form submit    

     }, 

     highlight: function (element) { // hightlight error inputs 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group 
     }, 

     unhighlight: function (element) { // revert the change dony by hightlight 
      $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group 
      setTimeout(function(){removeSuccessClass(element);}, 3000); 
     }, 

     submitHandler: function(){ 
      $('#save').hide(); 
      $('#saving').show(); 
      form.submit(); 
     } 
    }); 

    $('#validation-form-pdf').validate({ 
     rules: { 
      file: { 
       required: true, 
       extension: "pdf" 
      } 
     }, 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-block', // default input error message class 
     errorPlacement: function(error, element) { 
      if(element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
     }, 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: ":hidden", 

     invalidHandler: function (event, validator) { //display error alert on form submit    

     }, 

     highlight: function (element) { // hightlight error inputs 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group 
     }, 

     unhighlight: function (element) { // revert the change dony by hightlight 
      $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group 
      setTimeout(function(){removeSuccessClass(element);}, 3000); 
     }, 

     submitHandler: function(){ 
      $('#save').hide(); 
      $('#saving').show(); 
      form.submit(); 
     } 

    }); 
} 

Я хотел бы иметь его, так что я может просто передать остальные правила через что-то вроде этого

if (jQuery().validate) { 
    var removeSuccessClass = function(e) { 
     $(e).closest('.form-group').removeClass('has-success'); 
    } 

    $('#validation-form').validate({ 
     theRules 
    }); 

    $('#validation-form-pdf-word').validate({ 
     rules: { 
      file: { 
       extension: "pdf|doc|docx" 
      } 
     }, 
     theRules 
    }); 
} 

ответ

0

Вы не можете назвать .validate() несколько раз на одной и той же форме. Он используется один раз для инициализации плагина в форме, и любой последующий вызов игнорируется.

Если вы пытаетесь объединить общие параметры в один объект для использования в нескольких формах, используйте метод .setDefaults().

jQuery.validator.setDefaults({ 
    rules: { 
     .... 
    }, 
    messages: { 
     .... 
    }, 
    // other options, etc. 
}); 

Documentation


В противном случае, вы можете просто назначить общие правила в переменные и использовать их, как это ...

var theRules = { 
    required: true, 
    number: true 
}; 


$('#validation-form').validate({ 
    rules: { 
     fieldname: theRules 
    } 
}); 

$('#validation-form-pdf-word').validate({ 
    rules: { 
     file: { 
      extension: "pdf|doc|docx" 
     }, 
     anotherfield: theRules 
    } 
}); 

Ссылка вариант 2 здесь: https://stackoverflow.com/a/9461732/594235

DEMO: http://jsfiddle.net/K37jL/


EDIT на основе комментариев:

jQuery.validator.setDefaults({ 
    // all options, etc. - highlight, success, submitHandler, etc. 
}); 

$('#validation-form').validate({ 
    // your rules for this form 
}); 

$('#validation-form-pdf-word').validate({ 
    // your rules for this form 
}); 
+0

я только когда-либо называть его один раз. Это разные формы на разных страницах. Одна страница будет иметь обычную форму, а другая может иметь изображения для проверки. Кажется, я использовал плохой пример. Правила изменятся, но процесс от элемента errorElement до обработчика отправки останется таким же. –

+0

@PierceMcGeough, я могу только перейти от того, что вы просили и показали. Мой второй пример даст вам большую гибкость при назначении правил. Однако, если все параметры остаются неизменными, используйте для этого '.setDefaults()'. Затем ставьте правила только в отдельные вызовы '.validate()'. – Sparky

+0

@PierceMcGeough, см. Мое последнее редактирование. – Sparky

Смежные вопросы