Проверка JQuery в форме Submition

Question

Я пытаюсь разработать сценарий проверки для proyect с помощью Jquery, идея заключается в использовании скрипта проверки для любой формы, представленной таким образом, чтобы идентификатор формы изменялся, а также формировал элементы и формы действий или методов. поэтому я написал следующий скрипт, но он не обрабатывает шаг 2, когда 1-ое поле проходит проверку и в любом случае отправляет форму.

$(document).on('submit', 'form', function (e) { 
    var form_Submited = $(this).attr("name"); 
    var form_Action = $(this).attr("action"); 
    var form_Information = $(this).serialize(); 
    var form_Elements = $(this)[0].elements; 
    var i = 0; 

    e.preventDefault(); 

    function Validation(){ 
     for (i; i < form_Elements.length; i++) { 
      if (form_Elements[i].type === "text" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) { 
       console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
       return false;    
      } 
      else if (form_Elements[i].type === "password" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) { 
       console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
       return false;    
      } 
      else{ 
       return true; 
      } 
     } 
    } 

    if(Validation() === true){ 
      $.ajax({ 
       url: form_Action, 
       data: form_Information, 
       type: "GET", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (propName, val) { 
         $("#post-wrapper").append("<table><tr>"); 
         $("#post-wrapper").append("<td>"); 
         $("#post-wrapper").append(propName + ": " + val); 
         $("#post-wrapper").append("</td>"); 
         $("#post-wrapper").append("</tr></table>"); 
        }); 
       }, 
       error: function() { 
        console.log('Cannot retrieve data.'); 
       } 
      }); 
    } 
}); 

Надеется, что это ясно понять это :(

С уважением,

Г.

Answer 1

Это происходит из-за вашу функцию проверки(). Внутри ваш цикл, во время первая итерация проверяет правильность первого поля, и если valid возвращает true, это неверно, и поэтому, если первое поле является действительным, форма отправляется. Вы должны вернуть true только после завершения цикла for

Также обратите внимание, что в ваших условиях if и else if вам нужно поместить часть or (||) в '(' ')'. & & оператор имеет больше приоритет, чем или (||)

Измененный код (удалить еще условие и поставить возвращающие вне цикл + добавлен в скобках, если и еще, если условия):

$(document).on('submit', 'form', function (e) { 
var form_Submited = $(this).attr("name"); 
var form_Action = $(this).attr("action"); 
var form_Information = $(this).serialize(); 
var form_Elements = $(this)[0].elements; 
var i = 0; 

e.preventDefault(); 


function Validation(){ 
    var valid = true; 
    for (var i=0; i < form_Elements.length; i++) { 
     if (form_Elements[i].type === "text" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) { 
      console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
      return false;   
     } 
     else if (form_Elements[i].type === "password" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) { 
      console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
      return false;    
     } 
    } 
    return true; 
} 

if(Validation() === true){ 

    $.ajax({ 
      url: form_Action, 
      data: form_Information, 
      type: "GET", 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (propName, val) { 
        $("#post-wrapper").append("<table><tr>"); 
        $("#post-wrapper").append("<td>"); 
        $("#post-wrapper").append(propName + ": " + val); 
        $("#post-wrapper").append("</td>"); 
        $("#post-wrapper").append("</tr></table>"); 
       }); 
      }, 
      error: function() { 
       console.log('Cannot retrieve data.'); 
      } 
     }); 


} 

});