Required in Ajax

Navigation
2

I have a code that requires that when I submit, some fields are required to be filled, type required in html only in Ajax, instead of using the alert as I am using it, use required as in html. Here is my code below: 

function d(func){
			var nome = $('#nome').val();
			var data = $('#data_oco').val();
			var tipo = $('#tipo').val(); 
			var justificativa = $('#justificativa').val();
			if(justificativa==undefined){
				justificativa="";
			}else if(justificativa=="" && tipo!="Falta"){
				alert("Por favor preencha o campo Justificativa!");
			}
			jQuery.ajax({
				method: "get",
				url: "atudel.php",
				data: { "nome": nome, "data": data, "tipo": tipo, "justificativa": justificativa, "func": func },
				success: function(data){
					alert(data);
					window.location = 'editar_ocorrencia.php';
				}
			});
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="cabesalho_formulario">
				<h1 id="titulo">Controle Geral de Alunos <span>(Edição)</span></h1>
				<h4 id="nome_escola">EEEP Dr. José Alves da Silveira</h4>
				<div id="atualiza" class="modal fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Atualizar/Deletar Ocorrência</h4>
							</div>
							<div class="modal-body">
								  <br class='b'><label id='just'>Justificativa: </label><br class='b'><textarea required placeholder='Digite a justificativa do aluno...' title='Seja objetivo(a).' rows='5' name = 'obs' cols='50' id='justificativa'></textarea>
				    		</div>
				    		<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal" onclick="d('atualiza')">Atualizar</button>
								<button type="button" class="btn btn-default" data-dismiss="modal" onclick="d('deleta')">Deletar</button>
		             		</div>
		    			</div>
		    		</div>
				</div>

Instead, it looks like this, just so that you use jquery inside js function: 

<form method="" action="#">
<div id="cabesalho_formulario">
    				<h1 id="titulo">Controle Geral de Alunos <span>(Edição)</span></h1>
    				<h4 id="nome_escola">EEEP Dr. José Alves da Silveira</h4>
    				<div id="atualiza" class="modal fade">
    					<div class="modal-dialog">
    						<div class="modal-content">
    							<div class="modal-header">
    								<h4 class="modal-title">Atualizar/Deletar Ocorrência</h4>
    							</div>
    							<div class="modal-body">
    								  <br class='b'><label id='just'>Justificativa: </label><br class='b'><textarea required placeholder='Digite a justificativa do aluno...' title='Seja objetivo(a).' rows='5' name = 'obs' cols='50' id='justificativa'></textarea>
    				    		</div>
    				    		<div class="modal-footer">
    								<input type="submit" class="btn btn-default" data-dismiss="modal" value="Atualizar">
    								<input type="submit" class="btn btn-default" data-dismiss="modal" value="Deletar">
    		             		</div>
    		    			</div>
    		    		</div>
    				</div>
            </form>
    
asked by anonymous 03.09.2017 / 15:21

3 answers

3

You can add a dynamic alert message above the buttons when you give the error specified in your question. If you want another type of alert, you can format the element.

First create an event to remove the alert when the "justification" field is focused: 

$("#justificativa").on("focus",function(){
    $(".modal-body .msg_alerta").remove();
});

Then replace alert with this code: 

if($(".msg_alerta").length == 0){
    $(".modal-body").append('<span class="msg_alerta" style="display: block; color: #f30; margin: 10px 0;">Por favor preencha o campo Justificativa!</span>');
}
    return false;


$("#justificativa").on("focus",function(){
	$(".modal-body .msg_alerta").remove();
});

function d(func){
			var nome = $('#nome').val();
			var data = $('#data_oco').val();
			var tipo = $('#tipo').val(); 
			var justificativa = $('#justificativa').val();
			if(justificativa==undefined){
				justificativa="";
			}else if(justificativa=="" && tipo!="Falta"){
        if($(".msg_alerta").length == 0){
				$(".modal-body").append('<span class="msg_alerta" style="display: block; color: #f30; margin: 10px 0;">Por favor preencha o campo Justificativa!</span>');
        }
				return false;
			}
			jQuery.ajax({
				method: "get",
				url: "atudel.php",
				data: { "nome": nome, "data": data, "tipo": tipo, "justificativa": justificativa, "func": func },
				success: function(data){
					alert(data);
					window.location = 'editar_ocorrencia.php';
				}
			});
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1id="titulo">Controle Geral de Alunos <span>(Edição)</span></h1>
				<h4 id="nome_escola">EEEP Dr. José Alves da Silveira</h4>
				<div id="atualiza" class="modal fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title">Atualizar/Deletar Ocorrência</h4>
							</div>
							<div class="modal-body">
								  <br class='b'><label id='just'>Justificativa: </label><br class='b'><textarea required placeholder='Digite a justificativa do aluno...' title='Seja objetivo(a).' rows='5' name = 'obs' cols='50' id='justificativa'></textarea>
				    		</div>
				    		<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal" onclick="d('atualiza')">Atualizar</button>
								<button type="button" class="btn btn-default" data-dismiss="modal" onclick="d('deleta')">Deletar</button>
		             		</div>
		    			</div>
		    		</div>
				</div>
    
06.09.2017 / 02:08
0

You can use this ... 

$("#IdDoForm").submit(function(event){
  event.prefentDefault(); //previne que o formulario seja enviado sem estar devidamente preenchido com as regras de validação que você definiu do client-side
 //ADICIONE AQUI SUA FUNÇÃO AJAX.
});

I believe that you will be able to define fields as required and require them to be filled!

    
03.09.2017 / 16:05
0

Field tooltip with required attribute without a form

The required attribute is triggered when the form is submitted.

  

Required : This attribute specifies that the user must fill in a value before submitting a form.

As the justification field is not bound to a form in its first code, the error message regarding the field will not be displayed.

If your requirement is not to change the HTML, but you still need to display the messages to the fields with required, you will have to implement the message on your own using Javascript as it will not have the native HTML5 feature without the form .

    
03.09.2017 / 20:25
I can not delete warnings from ESLint How to make an event work with xamarin.forms and C #