0
I’m having trouble making jquery validate work within the bootstrap modal using a dynamic link (I don’t know if this is the reason). When it is outside it works perfectly more within the same no. follows below the codes:
php document.
<script src="js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></SCRIPT>
<script type="text/javascript" src="js/sweetalert.min.js"></SCRIPT>
<script type="text/javascript" language="javascript">
$(document).on('click', '[data-toggle="meumodal"]', function(event){
event.preventDefault();
target = $(this).attr("data-target");
content = $(this).attr("href");
$(target+".modal .modal-content").load(content,function(){
$(target).modal('show');
});
});
jQuery(document).ready(function() {
$('#jsontable').DataTable({
"lengthMenu": [ [5, 25, 50, 100, -1], [5, 25, 50, 100, "Todos"] ],
"processing": true,
"serverSide": true,
"oLanguage": {
"sUrl": "busca/pt-br.txt"
},
"ajax": "busca/documento_consulta.php"
});
});
</script>
<div class="modal fade" id="myModal" data-toggle="meumodal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<a data-toggle="meumodal" href="documento_devolver.php?id='.$row[9].'" data-target="#myModal" class="btn btn-danger" title="Devolver Requerimento"><i class="fa fa-thumbs-o-down"></i></a>
document_return.php
<script type="text/javascript">
$('#resetForm').on('click', function(){
document.getElementById("devolve").reset();
});
//form validation rules
$("#devolve").validate({
rules: {
exigencia: "required"
},
messages: {
exigencia: "* Informe o motivo da devolução",
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
SalvarRegistro();
}
});
function SalvarRegistro(){
$("#btn_salvar").addClass('bloqueia');
var dados = jQuery('#devolve').serialize();
swal({
title: "Tem Certeza?",
text: "Deseja Devolver este requerimento!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Sim, devolver",
showLoaderOnConfirm: true,
closeOnConfirm: false
},
function(){
$.ajax({
type: "POST",
dataType: "json",
url : 'acao/documento_acao.php',
data : dados,
success: function(data) {
$("#btn_salvar").removeClass('bloqueia');
if(data.sucesso == 0){
swal({
title: "Cadastrado!",
text: data.msg,
type: "success"
},
function(){
parent.location.href = parent.location.href;
});
}else{
swal({
title: "Um erro ocorreu",
text: data.msg,
type: "error"
});
}
}
});
return false;
});
}
</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Devolver Documento</h4>
</div>
<div class="modal-body">
<form action="" method="post" id="devolve">
<div class="col-sm-12">
<div class="form-group has-feedback">
<label for="message-text" class="control-label">Motivo da devolução:</label>
<textarea name="exigencia" id="exigencia" class="form-control"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
</div>
<div class="modal-footer">
<input name="usuario_lancamento" id="usuario_lancamento" type="hidden" value="<?php echo $_SESSION['usuarioid']; ?>" />
<input name="id_documento" id="id_documento" type="hidden" value="<?php echo $id_documento; ?>" />
<input name="action" id="action" type="hidden" value="devolver" />
<input type="submit" id="btn_salvar" class="btn btn-primary" value="enviar">
</form>
<button type="button" class="btn btn-default" id="resetForm">Limpar</button>
</div>
From what I could see it seems that the button does not work, because when I write in the field and I click away it says it is filled and if I delete what I wrote it gives error of the empty field. Even with the field filled does not send. I tested by removing the validation and sent.
From now on I appreciate any help.
I put in jsfiddle for better understanding:
https://jsfiddle.net/opeta/bLsvkeot/1/
I did a test with the modal opening completely on the parent page without the external link and it worked more to solve my problem I need the external link.
That question here is part of the problem, is it not? After all, what is the reason for carrying the modal out of the page?
– ShutUpMagda
@Shutupmagda this question is more specific because only jquery validate does not work, each page I call in the modal has a dynamically generated edit link. It seems that the validate works in part when you fill in the field and then delete it. In the solution of that question it would not be possible to use because the links are dynamic. example: documento_devolve.php? id=4
– opeta
You need to open a modal for each different id by passing the ID to the modal, that’s it?
– ShutUpMagda
exactly the id changes every link. if you repair I just call the validate on the parent page and even then it doesn’t work.
– opeta