Quisiera pedirles su amable ayuda para resolver lo siguiente:
Actualmente, mi pagina almacena datos de un formulario en una base de datos y valida que los campos estén correctamente colocados antes de introducir la información dentro de la misma...
Estoy creando un script para mostrar un mensaje contenido en un div (lo llamaré popup) al presionar el botón guardar pero resulta que necesito que primero corra mi script de validación y a continuación el script que muestra el "popup"
como puedo hacer esto ?
muchas gracias de antemano.
aquí está el código:
(esta parte es la que valida)
<?php if(isset($usuario)):?> <?php
//print_r($usuario);
$this->load->helper('json');
$usuariox= json_encode($usuario);
//echo $usuariox;
?> <script type="text/javascript"
src="<?php echo base_url();?>js/poblar.js"></script> <script
type="text/javascript">
$(document).ready(function(){
$('#datos').populate(<?php echo $usuariox; ?>); // jquery populate form
});
</script> <?php endif;?>
<style>
.error {
color: red;
font-size:x-small;
}
.table td {
width:400px;
}
.anchof{
width:550px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.validator.addMethod("alguntel",
function(value, element, params) {
if ( $("#tel1").val().length > 0 || $("#tel2").val().length > 0 || $("#tel3").val().length > 0 ) {
return true;
}
},'Tiene que capturar algun telefono');
$('#datos').validate({
rules: {
tx_correo: {
required: true,
minlength: 5,
email: true,
remote: {
url: "<?=base_url();?>principal/validauser/",
type: "post"
}
},
tx_password: {
required: true, minlength: 6
},
tx_password2: {
required: true, minlength: 6, equalTo: "#tx_password"
},
tel1: {alguntel: true },
tel2: {alguntel: true },
tel3: {alguntel: true }
},
messages: {
tx_correo: {
required: "Por favor, escriba una dirección de correo electrónico valida.",
minlength: jQuery.format("Por favor, escriba una dirección de correo electrónico valida."),
remote: "Ya utilizado"
} ,
tx_password: {
required: "Por favor, escriba una contraseña.",
minlength: jQuery.format("Su contraseña como minimo debe tener {0} caracteres.")
},
tx_password2: {
required: "Las contraseñas que ingresó no coinciden.",
minlength: jQuery.format("Su contraseña como minimo debe tener {0} caracteres."),
equalTo: "Las contraseñas que ingresó no coinciden.",
}
},
submitHandler: function(form){
jQuery(form).ajaxSubmit({
success: function(){
$("#boton1").click();
}
});
}
});
jQuery.extend(jQuery.validator.messages, {
required: "Se requiere esta información.",
remote: "Please fix this field.",
email: "Introduce un direción de correo valida",
url: "Please enter a valid URL.",
date: "Por favor introduce una fecha valida.",
dateISO: "Please enter a valid date (ISO).",
number: "Por favor introduce un número.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Tu contraseña no coincide",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Introduce maximo {0} caracteres."),
minlength: jQuery.validator.format("Introduce minimo {0} caracteres."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
});
// -->
</script>
<script>
/*$(function(){*/
$(document).ready(function () {
$('#datepicker').datetimepicker({
pickTime: false,
language: 'en',
hidePicker: true
});
$('#datepicker').on('changeDate', function(ev){
$(this).datetimepicker('hide');
});
});
</script>
<script language="javascript" type="text/javascript">
function muestraoculta(){
//Accedo a los elementos del formulario mediante el DOM
var chkbox = document.getElementById("checkulu");
var contenido = document.getElementById("tx_password");
var contenido2 = document.getElementById("tx_password2");
var atributo = contenido.getAttribute("type");
//Pregunto si el checkbox esta marcado
if(chkbox.checked){
contenido.setAttribute("type","text"),
contenido2.setAttribute("type","text");//Si el checkbox esta sin marcar, el atributo type vale paswword
}else{
contenido.setAttribute("type","password"),
contenido2.setAttribute("type","password"); //Si el checkbox esta marcado, el atributo type vale text
}
}
</script>
</br>
<div class="text-center"><img topd;="" center="" no-repeat=""
src="<?=base_url();?>images/titulos/datos_personales.png"></div>
</br>
<div class="texto_aviso">
<p>* Campos obligatorios<br>
( Para aplicar a cualquier vacante, es necesario que completes tus datos
en general, colocando al menos los campos que se marcan como
obligatorios. )</p>
</div>
</br>
<form role="form" method="post" id="datos"
action="<?=base_url();?>candidatos/guardar2" onSubmit="showHide()">
<br></br>
<div class="datos_generales_title">
<h1>Datos generales</h1>
(esta parte realiza la función del popup)
<script type="text/javascript">
function showHide(){
var oImageDiv=document.getElementById('myimageDiv'),
oImageDiv2=document.getElementById('myimageDiv2')
oImageDiv.style.display=(oImageDiv.style.display== 'none')?'inline':'none',
oImageDiv2.style.display=(oImageDiv2.style.display =='none')?'inline':'none'
}
</script>
<style type="text/css">
#myimageDiv {
width: 387px;
height: 97px;
margin-top: -23px;
margin-left: -163px;
background-color: white;
left: 50%;
bottom: 5%;
position: absolute;
z-index:1002;
overflow: auto;
}
#myimage1{
width: 327px;
height: 47px;
margin-top: -23px;
margin-left: -163px;
left: 50%;
bottom: 50%;
position: absolute;
}
#myimageDiv2 {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.2;
opacity:.20;
filter: alpha(opacity=20);
}
</style>
<div id="myimageDiv2" style="display: none;"> </div>
<div id="myimageDiv" style="display: none;position:absolute;">
<center>
<img id="myimage1" src="<?=base_url()?>images/logis.gif" alt="Imagen" title="Imagen" width="500px">
<br/><br/>
<h3 style="font-family:arial">Cargando...</h>
</center>
</div>
