Question:
I'm new to jQuery and I'm having difficulty doing a form validation with jQuery for a church CRM that is as follows:
I have an HTML code that is part of a CRM that I am developing. In this HTML I have a form with only one line and several columns, however, there is the option to add more lines with the button that is right next to the columns. Up to this point everything is OK.
The problem happens when I'm going to validate these fields in order to generate a bean file from the CRM itself, following the steps so that the validation works. It would happen as follows:
- Validate if the first field of the form is filled (since it has an
id). If so, it goes on going through the other columns and saving in some array or something like that in jQuery . - If there are more lines, it will go to the next line and repeat the process (I did a
foreach, but I don't know if it's right) and this process will happen until the last line, where, if the last line is completely unfilled, it will be ignored and the bean will be generated later. - The other validation is that if in the middle of the
formthe first column, in any row, is empty, it will issue an error message saying that the field is mandatory.
Below, I'll leave the code I've done so far for a better understanding:
function addRow(element) { var ln = $('#countLine').val(); ln++; $linha = $('#tabela tr:last').clone(); $('input', $linha).val(''); $('div.yui-ac-container', $linha).attr('id', 'EditView_Membro_results' + ln); $('ul.list-data', $linha).attr('id', 'UserAutoCompleteContent' + ln); $('.membro_id', $linha).attr('id', 'membro_id' + ln); $('.dizimo_id', $linha).attr('id', 'dizimo_id' + ln); $('.oferta_id', $linha).attr('id', 'oferta_id' + ln); $('.oferta_especial_id', $linha).attr('id', 'oferta_especial_id' + ln); $('.missoes_id', $linha).attr('id', 'missoes_id' + ln); $('.cesta_basica_id', $linha).attr('id', 'cesta_basica_id' + ln); $('.ana_nazareno_id', $linha).attr('id', 'ana_nazareno_id' + ln); $('.outros_id', $linha).attr('id', 'outros_id' + ln); $('.membro_autocomplete', $linha).attr('id', 'Membro' + ln); $('.dizimo_autocomplete', $linha).attr('id', 'Dizimo' + ln); $('.oferta_autocomplete', $linha).attr('id', 'Oferta' + ln); $('.oferta_especial_autocomplete', $linha).attr('id', 'OfertaEspecial' + ln); $('.missoes_autocomplete', $linha).attr('id', 'Missoes' + ln); $('.cesta_basica_autocomplete', $linha).attr('id', 'CestaBasica' + ln); $('.ana_nazareno_autocomplete', $linha).attr('id', 'AnaNazareno' + ln); $('.outros_autocomplete', $linha).attr('id', 'Outros' + ln); $('#tabela tr:last').after($linha); bind(); $(element).attr('onclick', 'DeleteRow(this)'); $(element).html('Remover'); $('#countLine').val(ln); } function DeleteRow(element) { var row = $(element).closest('tr'); row.remove(); } //adiciona classe css quando for feito o click $(document).ready(function(){ $("button").click(function(){ $("td").addClass("tabe"); }); }); function HideDivsOnBlur() { $(".yui-ac-content").hide(); $(".yui-ac-hd").hide(); } function autoCompleteMembro(nomeMembro, idInput, divResults) { var parametro = $(nomeMembro).val(); var id_input = nomeMembro.attr('id'); var row = id_input.match(/\d+/)[0]; var dados = new Object(); dados.form = "EditView"; dados.method = "query"; dados.modules = ["Accounts"]; dados.field_list = ["name", "id"]; dados.populate_list = ["account_name", "account_id_c"]; dados.required_list = ["account_id_c"]; dados.conditions = [{"name" : "name", "op" : "like_custom", "end" : "%", "value" : ""}]; dados.limit = "10"; dados.no_match_text = "Nada foi Encontrado"; var dadosJson = JSON.stringify(dados); var dataJson = { to_pdf : "true", module : "Home", action : "quicksearchQuery", data : dadosJson, query : parametro} $.ajax({ url: "index.php", data: dataJson, type: "post", success: function(resp){ console.log(resp); var resposta = $.parseJSON(resp); if(resposta.fields.length > 0) { // remove a lista buscada apos selecionar o membro $("#UserAutoCompleteContent"+ row + " li").remove(); $("#EditView_Membro_results"+ row + " .yui-ac-content").show(); $("#EditView_Membro_results"+ row + " .yui-ac-hd").show(); $(divResults).show(); $(divResults).children(0).show(); $(divResults).children(0).css("z-index", "10000"); $(divResults).children(1).show(); $(resposta.fields).each(function(index, item){ $("#UserAutoCompleteContent"+row).append( '<li style="z-index: 10000;" onclick="changeAssignedUserId(\'' + item.id + '\', \'' + item.name.toUpperCase() + '\',\'' + $(idInput).attr('id') + '\',\'' + $(nomeMembro).attr('id') + '\',\'' + $(divResults).find('ul').attr('id') + '\');">' + item.name.toUpperCase() + '</li>'); }); $("#EditView_Membro_results"+row+" li").hover( function(){ $(this).css("background-color", "#426FD9") $(this).css("color", "#fff") }, function(){ $(this).css("background-color", "#fff") $(this).css("color", "#000") }); } } }); } function changeAssignedUserId(Id, Name, MembroIdInputId, ProdNomeInputId, UlId) { console.log(MembroIdInputId); $("#" + MembroIdInputId).val(Id); $("#" + ProdNomeInputId).val(Name); // remove a lista buscada apos selecionar o item $("#" + UlId + " li").remove(); // esconde o bloco do resultado da busca $(".yui-ac-content").hide(); $(".yui-ac-hd").hide(); } function bind() { $('.membro_autocomplete').unbind('keyup').keyup(function(){ $inputMembro = $(this).closest('input'); $inputMembroId = $(this).closest('td').find("input[class='membro_id']"); $divResultados = $(this).closest('td').find("input[class='yui-ac-container']"); autoCompleteMembro($inputMembro, $inputMembroId, $divResultados); }); } bind(); function sendToPhp() { /* Verificar validação */ var linha = []; $('#tabela tr').each(function(){ $(this).find("input[type=text]").each(function() { // if($('#Membro0').val() !== ''){ //// $('#Membro0').closest("td"); // console.log($('#Membro0').val()); // return true; // } // else{ // console.log('Chegou aqui Valor Nulo'); // return false; // } linha = [ $(this).val() ]; console.log(linha) }); // loop no array linha }); // if($('.membro_id').val() !== null) // { // //foreach verificando se o proximo de cada posição na coluna possui valor // //setar com false e em caso de valor mudar para true // } // else if($('.membro_id').val() === null) // { // //foreach verificando se o proximo de cada posição na coluna possui valor // //setar com false e em caso de valor mudar para true // } } function check() { var ok = 1; $('#Membro0').blur(function() { if($(this).val().length === 0) { ok = 0; $(this).css('border-color','red'); alert('Campo MEMBRO deve ser preenchido'); } else{ $(this).css('border-color',''); } }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="EditView_tabs"> <div> <div id="detailpanel_1" class="edit view edit508 expanded"> <form id="formRelatorio" method="POST" action="index.php?module=culto_relatorio_dizimo&action=gravaRelatorio"> <input type="hidden" name="module" value="culto_relatorio_dizimo"> <input type="hidden" name="record" value=""> <input type="hidden" id="action" name="gravaRelatorio"> <input type="hidden" name="return_module" value="culto_relatorio_dizimo"> <input type="hidden" name="return_action" value="relatorioDizimo"> <table id="tabela" width="90%" border="0" cellspacing="1" cellpadding="0" class="yui3-skin-sam edit view panelContainer"> <tr> <th class="larg">Membro</th> <th class="larg">Dizimo</th> <th class="larg">Oferta</th> <th class="larg">Oferta Especial</th> <th class="larg">Missões</th> <th class="larg">Cesta Básica</th> <th class="larg">ANA Nazareno</th> <th class="larg">Outros</th> <th> </th> </tr> <tr class='conteudo'> <td class="tabe"> <input id="membro_id0" class="membro_id" type="hidden" value=""> <input id="Membro0" class="larg membro_autocomplete" type="text"> <div id="EditView_Membro_results0" class="yui-ac-container"> <div class="yui-ac-content" style="display: none;"> <div class="yui-ac-hd" style="display: none;"> </div> <div class="yui-ac-bd"> <ul id="UserAutoCompleteContent0" style="z-index: 100;" class='list-data'> </ul> </div> <div class="yui-ac-ft" style="display: none;"> </div> </div> </div> </td> <td class="tabe"> <input id="dizimo_id0" class="dizimo_id" type="hidden" value=""> <input id="Dizimo0" class="larg dizimo_autocomplete" type="text"> <div id="EditView_Dizimo_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="oferta_id0" class="oferta_id" type="hidden" value=""> <input id="Oferta0" class="larg oferta_autocomplete" type="text"> <div id="EditView_Oferta_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="oferta_especial_id0" class="oferta_especial_id" type="hidden" value=""> <input id="OfertaEspecial0" class="larg oferta_especial_autocomplete" type="text"> <div id="EditView_OfertaEspecial_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="missoes_id0" class="missoes_id" type="hidden" value=""> <input id="Missoes0" class="larg missoes_autocomplete" type="text"> <div id="EditView_Missoes_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="cesta_basica_id0" class="cesta_basica_id" type="hidden" value=""> <input id="CestaBasica0" class="larg cesta_basica_autocomplete" type="text"> <div id="EditView_CestaBasica_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="ana_nazareno_id0" class="ana_nazareno_id" type="hidden" value=""> <input id="AnaNazareno0" class="larg ana_nazareno_autocomplete" type="text"> <div id="EditView_AnaNazareno_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="outros_id0" class="outros_id" type="hidden" value=""> <input id="Outros0" class="larg outros_autocomplete" type="text"> <div id="EditView_Outros_results0" class="yui-ac-container"> </div> </td> <td> <button type="button" onclick="addRow(this)">Adicionar</button> </td> </tr> </table> </form> <div class="fora"> <button type="button" class="buton" id="sendBtnEnviar" onclick="sendToPhp()">Inserir</button> <input id="countLine" class="countLine" type="hidden" value="1"> </div> </div> </div> </div>
Answer:
Here is the validation with final result in JSON jsonResultado :
function addRow(element) { var ln = $('#countLine').val(); ln++; $linha = $('#tabela tr:last').clone(); $('input', $linha).val(''); $('div.yui-ac-container', $linha).attr('id', 'EditView_Membro_results' + ln); $('ul.list-data', $linha).attr('id', 'UserAutoCompleteContent' + ln); $('.membro_id', $linha).attr('id', 'membro_id' + ln); $('.dizimo_id', $linha).attr('id', 'dizimo_id' + ln); $('.oferta_id', $linha).attr('id', 'oferta_id' + ln); $('.oferta_especial_id', $linha).attr('id', 'oferta_especial_id' + ln); $('.missoes_id', $linha).attr('id', 'missoes_id' + ln); $('.cesta_basica_id', $linha).attr('id', 'cesta_basica_id' + ln); $('.ana_nazareno_id', $linha).attr('id', 'ana_nazareno_id' + ln); $('.outros_id', $linha).attr('id', 'outros_id' + ln); $('.membro_autocomplete', $linha).attr('id', 'Membro' + ln); $('.dizimo_autocomplete', $linha).attr('id', 'Dizimo' + ln); $('.oferta_autocomplete', $linha).attr('id', 'Oferta' + ln); $('.oferta_especial_autocomplete', $linha).attr('id', 'OfertaEspecial' + ln); $('.missoes_autocomplete', $linha).attr('id', 'Missoes' + ln); $('.cesta_basica_autocomplete', $linha).attr('id', 'CestaBasica' + ln); $('.ana_nazareno_autocomplete', $linha).attr('id', 'AnaNazareno' + ln); $('.outros_autocomplete', $linha).attr('id', 'Outros' + ln); $('#tabela tr:last').after($linha); bind(); $(element).attr('onclick', 'DeleteRow(this)'); $(element).html('Remover'); $('#countLine').val(ln); } function DeleteRow(element) { var row = $(element).closest('tr'); row.remove(); } //adiciona classe css quando for feito o click $(document).ready(function(){ $("button").click(function(){ $("td").addClass("tabe"); }); }); function HideDivsOnBlur() { $(".yui-ac-content").hide(); $(".yui-ac-hd").hide(); } function autoCompleteMembro(nomeMembro, idInput, divResults) { var parametro = $(nomeMembro).val(); var id_input = nomeMembro.attr('id'); var row = id_input.match(/\d+/)[0]; var dados = new Object(); dados.form = "EditView"; dados.method = "query"; dados.modules = ["Accounts"]; dados.field_list = ["name", "id"]; dados.populate_list = ["account_name", "account_id_c"]; dados.required_list = ["account_id_c"]; dados.conditions = [{"name" : "name", "op" : "like_custom", "end" : "%", "value" : ""}]; dados.limit = "10"; dados.no_match_text = "Nada foi Encontrado"; var dadosJson = JSON.stringify(dados); var dataJson = { to_pdf : "true", module : "Home", action : "quicksearchQuery", data : dadosJson, query : parametro} $.ajax({ url: "index.php", data: dataJson, type: "post", success: function(resp){ console.log(resp); var resposta = $.parseJSON(resp); if(resposta.fields.length > 0) { // remove a lista buscada apos selecionar o membro $("#UserAutoCompleteContent"+ row + " li").remove(); $("#EditView_Membro_results"+ row + " .yui-ac-content").show(); $("#EditView_Membro_results"+ row + " .yui-ac-hd").show(); $(divResults).show(); $(divResults).children(0).show(); $(divResults).children(0).css("z-index", "10000"); $(divResults).children(1).show(); $(resposta.fields).each(function(index, item){ $("#UserAutoCompleteContent"+row).append( '<li style="z-index: 10000;" onclick="changeAssignedUserId(\'' + item.id + '\', \'' + item.name.toUpperCase() + '\',\'' + $(idInput).attr('id') + '\',\'' + $(nomeMembro).attr('id') + '\',\'' + $(divResults).find('ul').attr('id') + '\');">' + item.name.toUpperCase() + '</li>'); }); $("#EditView_Membro_results"+row+" li").hover( function(){ $(this).css("background-color", "#426FD9") $(this).css("color", "#fff") }, function(){ $(this).css("background-color", "#fff") $(this).css("color", "#000") }); } } }); } function changeAssignedUserId(Id, Name, MembroIdInputId, ProdNomeInputId, UlId) { console.log(MembroIdInputId); $("#" + MembroIdInputId).val(Id); $("#" + ProdNomeInputId).val(Name); // remove a lista buscada apos selecionar o item $("#" + UlId + " li").remove(); // esconde o bloco do resultado da busca $(".yui-ac-content").hide(); $(".yui-ac-hd").hide(); } function bind() { $('.membro_autocomplete').unbind('keyup').keyup(function(){ $inputMembro = $(this).closest('input'); $inputMembroId = $(this).closest('td').find("input[class='membro_id']"); $divResultados = $(this).closest('td').find("input[class='yui-ac-container']"); autoCompleteMembro($inputMembro, $inputMembroId, $divResultados); }); } bind(); function addJson(campo, texto){ jsonResultado.push({ guia: campo, texto: texto }); } function sendToPhp() { jsonResultado = []; var validado = true; var linha_class = ".conteudo"; var linhasTabela = $(linha_class); var num_linhas = linhasTabela.length; linhasTabela.each(function(){ var campos = $(this).find("input[type=text]"); var num_campos = campos.length; campos.each(function(i,e){ linha_idx = $(e).closest(linha_class).index(linha_class); if($(this).val() == "" && i == 0){ alert("Primeira coluna não pode ter campo vazio!"); validado = false; }else{ var guia = i == 0 ? "membro" : i == 1 ? "dizimo" : i == 2 ? "oferta" : i == 3 ? "oferta_especial" : i == 4 ? "missoes" : i == 5 ? "cesta_basica" : i == 6 ? "ana_nazareno" : i == 7 ? "outros" : null; addJson(guia, $(this).val()); } }); }); if(validado){ alert("Formulário está ok!"); jsonResultado = JSON.stringify(jsonResultado); } } function check() { var ok = 1; $('#Membro0').blur(function() { if($(this).val().length === 0) { ok = 0; $(this).css('border-color','red'); alert('Campo MEMBRO deve ser preenchido'); } else{ $(this).css('border-color',''); } }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="EditView_tabs"> <div> <div id="detailpanel_1" class="edit view edit508 expanded"> <form id="formRelatorio" method="POST" action="index.php?module=culto_relatorio_dizimo&action=gravaRelatorio"> <input type="hidden" name="module" value="culto_relatorio_dizimo"> <input type="hidden" name="record" value=""> <input type="hidden" id="action" name="gravaRelatorio"> <input type="hidden" name="return_module" value="culto_relatorio_dizimo"> <input type="hidden" name="return_action" value="relatorioDizimo"> <table id="tabela" width="90%" border="0" cellspacing="1" cellpadding="0" class="yui3-skin-sam edit view panelContainer"> <tr> <th class="larg">Membro</th> <th class="larg">Dizimo</th> <th class="larg">Oferta</th> <th class="larg">Oferta Especial</th> <th class="larg">Missões</th> <th class="larg">Cesta Básica</th> <th class="larg">ANA Nazareno</th> <th class="larg">Outros</th> <th> </th> </tr> <tr class='conteudo'> <td class="tabe"> <input id="membro_id0" class="membro_id" type="hidden" value=""> <input id="Membro0" class="larg membro_autocomplete" type="text"> <div id="EditView_Membro_results0" class="yui-ac-container"> <div class="yui-ac-content" style="display: none;"> <div class="yui-ac-hd" style="display: none;"> </div> <div class="yui-ac-bd"> <ul id="UserAutoCompleteContent0" style="z-index: 100;" class='list-data'> </ul> </div> <div class="yui-ac-ft" style="display: none;"> </div> </div> </div> </td> <td class="tabe"> <input id="dizimo_id0" class="dizimo_id" type="hidden" value=""> <input id="Dizimo0" class="larg dizimo_autocomplete" type="text"> <div id="EditView_Dizimo_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="oferta_id0" class="oferta_id" type="hidden" value=""> <input id="Oferta0" class="larg oferta_autocomplete" type="text"> <div id="EditView_Oferta_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="oferta_especial_id0" class="oferta_especial_id" type="hidden" value=""> <input id="OfertaEspecial0" class="larg oferta_especial_autocomplete" type="text"> <div id="EditView_OfertaEspecial_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="missoes_id0" class="missoes_id" type="hidden" value=""> <input id="Missoes0" class="larg missoes_autocomplete" type="text"> <div id="EditView_Missoes_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="cesta_basica_id0" class="cesta_basica_id" type="hidden" value=""> <input id="CestaBasica0" class="larg cesta_basica_autocomplete" type="text"> <div id="EditView_CestaBasica_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="ana_nazareno_id0" class="ana_nazareno_id" type="hidden" value=""> <input id="AnaNazareno0" class="larg ana_nazareno_autocomplete" type="text"> <div id="EditView_AnaNazareno_results0" class="yui-ac-container"> </div> </td> <td class="tabe"> <input id="outros_id0" class="outros_id" type="hidden" value=""> <input id="Outros0" class="larg outros_autocomplete" type="text"> <div id="EditView_Outros_results0" class="yui-ac-container"> </div> </td> <td> <button type="button" onclick="addRow(this)">Adicionar</button> </td> </tr> </table> </form> <div class="fora"> <button type="button" class="buton" id="sendBtnEnviar" onclick="sendToPhp()">Inserir</button> <input id="countLine" class="countLine" type="hidden" value="1"> </div> </div> </div> </div>