I'm having trouble making jquery validate work within the bootstrap modal using a dynamic link (I do not know if this is the reason). When it is out it works perfectly more inside the same not. below the codes:
document.php
<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_devolver.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 noticed it seems that the button does not work, because when I write in the field and give a click outside it says it is filled and if I delete what I wrote it gives error of the empty field. Even with the filled field does not send. I tested it by removing the validation and sent it.
Thanks in advance for any help.
I put it in jsfiddle for better understanding:
I made a test with the modal opening completely on the parent page without the external link and worked more to solve my problem I need the external link.