Упрощение проверки формы

Question

У меня есть форма с 5 полями ввода (4 ввода текста, 1 флажок), и я написал этот код для обработки недостающей информации в полях ввода. Код работает отлично, но он кажется повторяющимся и неэффективным. Есть ли более простой способ написать этот код?

$("#main-form").on('submit', function(event) { 

if (!$("#field1").val()) { 
event.preventDefault(); 
$("#field1-error").html("Error!"); 
} 
else 
$("#field1-error").html(""); 

if (!$("#field2").val()) { 
event.preventDefault(); 
$("#field2-error").html("Error"); 
} 
else 
$("#field2-error").html(""); 

if (!$("#field3").val()) { 
event.preventDefault(); 
$("#field3-error").html("Error"); 
} 
else 
$("#field3").html(""); 

if (!$("#field4").val() && !$("#checkbox1").prop('checked')) { 
event.preventDefault();          
$("#field4-error").html("Error"); 
} 
else 
$("#field4-error").html(""); 

}); 

Answer 1

// Попробуйте это.

$ (документ) .ready (функция() {

/** Form Validation */ 
    $("#formId").validate({ 
     rules: { 
      field1:{ required: true }, 
      field2:{ required: true }, 
      field3:{ required: true }, 
      field4:{ required: true } 
     }, 
     messages: { 
      field1:{ required: 'Field1 is required!' }, 
      field2:{ required: 'Field2 is required!' }, 
      field3:{ required: 'Field3 is required!' }, 
      field4:{ required: 'Field4 is required!' } 
     } 

     // Submit function 

});

// Это простая проверка формы jquery, но вам нужно включить плагин проверки jquery. http://jqueryvalidation.org/

Answer 2

Если функция выполняет одно и то же в нескольких похожих полях, лучше всего написать одну функцию. Я думаю, что каждый инженер Javascript в какой-то момент ударил головой о стену, пытаясь придумать проверенные формы проверки.

Для этой ситуации я буду писать функцию и называть ее всякий раз, когда мне это нужно. Попробуйте следующее:

$("#main-form").on('submit', function(event) { 
    myValidations.contentsPresent('#field1', '#field1-error');//call the first field validaitions 
    myValidations.contentsPresent('#field2', '#field2-error');//second 
    //third 
    //etc 
}); 

var myValidations = 
{ 
    contentsPresent: function(fieldId, errorId) 
    { 
     if (!$(fieldId).val()) { 
      event.preventDefault(); 
      $(errorId).html("Error!"); 
     }  
     else 
      $(errorId).html(""); 
     } 
    }, 
    contentsPresentCheckBox: function(fieledId, checkboxId, errorId) 
    { 
     if (!$(fieledId).val() && !$(checkboxId).prop('checked')) { 
      event.preventDefault();          
      $(errorId).html("Error"); 
     } 
     else 
      $(errorId).html(""); 
     } 
    } 
}