Skip to content

Instantly share code, notes, and snippets.

@NightZpy

NightZpy/ejemplo-jquerform-validate

Created October 30, 2014 20:40
Show Gist options
  • Save NightZpy/af7b2455ac52ab01e800 to your computer and use it in GitHub Desktop.
Save NightZpy/af7b2455ac52ab01e800 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ejemplo-jquerform-validate
<?php
require_once "conexion.php";
$database = array(
'usuario' => 'cotizador_dev',
'password' => '2cotizador_dev2',
'host' => 'segurosyfianzasmx.ipagemysql.com',
'db' => 'confianza_mx'
);
$conexion = new Conexion($database);
$strQuery = "SELECT marca as nombre FROM cotizaciones GROUP BY marca";
$marcas = $conexion->seleccionarDatos($strQuery);
$conexion->cerrarConexion();
?>
<!DOCTYPE html>
<html>
<head>
<title>Agentes de Seguros y Fianzas - CONFIANZA.MX</title>
<meta name='description' content='Agentes de Seguros y Fianzas' />
<meta name='keywords' content='SEGUROS, FIANZAS, AUTOS, ANTICIPO, CUMPLIMIENTO, VICIOS OCULTOS, SEGURO DE AUTO, SEGURO DE AUTOMOVIL, TAXIS, RESPONSABILIDAD CIVIL, FIANZA DE FIDELIDAD, ABUSO DE CONFIANZA, ROBO, FRAUDE, ASEGURADORA, AFIANZADORA, FIANZAS MONTERREY, QUALITAS, ABA SEGUROS,' />
<meta property='og:site_name' content='Agentes de Seguros y Fianzas' />
<meta property='og:title' content='CONFIANZA.MX' />
<meta property='og:description' content='Agentes de Seguros y Fianzas' />
<meta property='og:image' content='http://confianza.mx/uploads/3/3/7/0/3370835/3983457.jpg' />
<meta property='og:image' content='http://confianza.mx/uploads/3/3/7/0/3370835/3731551_orig.jpg' />
<meta property='og:image' content='http://confianza.mx//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020467146/?value=0&guid=ON&script=0' />
<meta property='og:url' content='http://confianza.mx/' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="//assets.dragndropbuilder.com/css/sites.css?buildTime=1386132930" type="text/css" /><link rel='stylesheet' type='text/css' href='http://www.dragndropbuilder.com/editor/libraries/fancybox/fancybox.css?1386132930' />
<link rel='stylesheet' type='text/css' href='/files/main_style.css?1402353151' title='wsite-theme-css' />
<link href='http://fonts.googleapis.com/css?family=Rosario:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<style type='text/css'>
.wsite-elements div.paragraph, .wsite-elements p, .wsite-elements .product-block .product-title, .wsite-elements .product-description, .wsite-elements .wsite-form-field label, .wsite-elements .wsite-form-field label, #wsite-content div.paragraph, #wsite-content p, #wsite-content .product-block .product-title, #wsite-content .product-description, #wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label, .blog-sidebar div.paragraph, .blog-sidebar p, .blog-sidebar .wsite-form-field label, .blog-sidebar .wsite-form-field label {}
#wsite-content div.paragraph, #wsite-content p, #wsite-content .product-block .product-title, #wsite-content .product-description, #wsite-content .wsite-form-field label, #wsite-content .wsite-form-field label, .blog-sidebar div.paragraph, .blog-sidebar p, .blog-sidebar .wsite-form-field label, .blog-sidebar .wsite-form-field label {}
.wsite-elements h2, .wsite-elements .product-long .product-title, .wsite-elements .product-large .product-title, .wsite-elements .product-small .product-title, #wsite-content h2, #wsite-content .product-long .product-title, #wsite-content .product-large .product-title, #wsite-content .product-small .product-title, .blog-sidebar h2 {}
#wsite-content h2, #wsite-content .product-long .product-title, #wsite-content .product-large .product-title, #wsite-content .product-small .product-title, .blog-sidebar h2 {}
#wsite-title {}
</style>
<link rel='stylesheet' type='text/css' href='http://www.dragndropbuilder.com/editor/images/slideshow/slideshow.css?1386132930' />
<script><!--
var STATIC_BASE = 'http://www.dragndropbuilder.com/';
var STYLE_PREFIX = 'wsite';
//-->
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='./jquery.validate.min.js'></script>
<script src='./messages_es.js'></script>
<script src='jquery.form.min.js'></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script src='//assets.dragndropbuilder.com/js/site/main.js?buildTime=1386132930'></script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/editor/libraries/slideshow-jq.js?buildTime=1386132930'></script>
<script type='text/javascript'><!--
(function(jQuery){
function initFlyouts(){initPublishedFlyoutMenus([{"id":"740407467421931391","title":"Inicio","url":"index.html","target":""},{"id":"872960009229919715","title":"Fianzas administrativas","url":"fianzas-administrativas.html","target":""},{"id":"676339385876430294","title":"Seguro Obra Civil, Maquinaria y RC","url":"seguro-obra-civil-maquinaria-y-rc.html","target":""},{"id":"847818481935316992","title":"Contacto","url":"contacto.html","target":""},{"id":"732349666328219383","title":"Fianza de Fidelidad","url":"fianza-de-fidelidad.html","target":""},{"id":"579573958297187272","title":"Seguro de Auto, Taxis y Motos","url":"seguro-de-auto-taxis-y-motos.html","target":""},{"id":"451727198412852432","title":"Seguro de Vida","url":"seguro-de-vida.html","target":""},{"id":"253356518887478380","title":"Seguro de Ahorro y de Retiro ","url":"seguro-de-ahorro-y-de-retiro.html","target":""},{"id":"860552379733575385","title":"Seguro de Estudios","url":"seguro-de-estudios.html","target":""},{"id":"578709330742549503","title":"Seguro de Gastos M&eacute;dicos","url":"seguro-de-gastos-meacutedicos.html","target":""},{"id":"744546935691404457","title":"Seguro de Viajes","url":"seguro-de-viajes.html","target":""}],'740407467421931391',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'active',false)}
if (jQuery) {
if (jQuery.browser.msie && !window.flyoutMenusRefreshable) window.onload = initFlyouts;
else jQuery(initFlyouts);
}else{
if (Prototype.Browser.IE) window.onload = initFlyouts;
else document.observe('dom:loaded', initFlyouts);
}
})(window._W && _W.jQuery)
//-->
</script>
</head>
<body class='landing-page wsite-theme-light wsite-page-index'>
<div id="header-wrap">
<div class="container">
<table id="header">
<tr>
<td id="logo"><span class='wsite-logo'><a href='/'><span id="wsite-title">Agentes de Seguros y Fianzas</span></a></span></td>
<td id="header-right">
<table>
<tr>
<td class="phone-number"></td>
<td class="social"><div style="text-align:left;"><div style="height:0px;overflow:hidden"></div>
<span class="wsite-social wsite-social-default"><a class='wsite-social-item wsite-social-facebook' href='http://facebook.com/Confianzamx' target='_blank'><span class='wsite-social-item-inner'></span></a><a class='wsite-social-item wsite-social-mail' href='mailto:ventas@confianza.mx' target='_blank'><span class='wsite-social-item-inner'></span></a><a class='wsite-social-item wsite-social-linkedin' href='http://www.linkedin.com/company/confianza-mx' target='_blank'><span class='wsite-social-item-inner'></span></a><a class='wsite-social-item wsite-social-plus' href='https://plus.google.com/u/0/b/110955167983545340939/110955167983545340939/posts' target='_blank'><span class='wsite-social-item-inner'></span></a></span>
<div style="height:0px;overflow:hidden"></div></div></td>
</tr>
<tr>
<td colspan="2" class="search"></td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- end container -->
</div><!-- end header-wrap -->
<div id="nav-wrap">
<div class="container block">
<ul class='wsite-menu-default'><li id='active'><a href='/index.html'>Inicio</a></li><li id='pg872960009229919715'><a href='/fianzas-administrativas.html'>Fianzas administrativas</a></li><li id='pg872960009229919715'><a href='/consultar-cotizacion.html'>Cotizar</a></li><li id='pg676339385876430294'><a href='/seguro-obra-civil-maquinaria-y-rc.html'>Seguro Obra Civil, Maquinaria y RC</a></li><li id='pg847818481935316992'><a href='/contacto.html'>Contacto</a></li><li id='pg732349666328219383'><a href='/fianza-de-fidelidad.html'>Fianza de Fidelidad</a></li><li id='pg579573958297187272'><a href='/seguro-de-auto-taxis-y-motos.html'>Seguro de Auto, Taxis y Motos</a></li><li id='pg451727198412852432'><a href='/seguro-de-vida.html'>Seguro de Vida</a></li><li id='pg253356518887478380'><a href='/seguro-de-ahorro-y-de-retiro.html'>Seguro de Ahorro y de Retiro </a></li><li id='pg860552379733575385'><a href='/seguro-de-estudios.html'>Seguro de Estudios</a></li><li id='pg578709330742549503'><a href='/seguro-de-gastos-meacutedicos.html'>Seguro de Gastos M&eacute;dicos</a></li><li id='pg744546935691404457'><a href='/seguro-de-viajes.html'>Seguro de Viajes</a></li></ul>
</div><!-- end container -->
</div><!-- end nav-wrap -->
<script>
jQuery( document ).ready(function() {
jQuery('#marca').click(function(){
jQuery.post('list.php', { type: "descripcion", id: jQuery('#marca').val()},
function(response){
jQuery('#descripcion').html('');
jQuery('#descripcion').append('<option value=\"\">-- Seleccione --</option>');
response = jQuery.parseJSON(response);
jQuery.each(response, function (k,v){
jQuery('#descripcion').append('<option value=\"'+v.descripcion+'\">'+v.descripcion+'</option>');
});
jQuery("#descripcion").removeAttr('disabled');
});
});
/*jQuery('#anio').click(function(){
jQuery.post('list.php', { type: "anio", marca: jQuery('#marca').val(), descripcion: jQuery('#descripcion').val(), anio: jQuery('#anio').val()},
function(response){
response = jQuery.parseJSON(response);
if(response[0].cotizacion >= 0) {
}
});
});*/
var $params = {debug:false, rules:{}, messages: {}};
var $anio = jQuery("#anio").attr("name");
var $marca = jQuery("#marca").attr("name");
var $descripcion = jQuery("#descripcion").attr("name");
var $codigoPostal = jQuery("#codigo_postal").attr("name");
$params['rules'][$marca] = {"required": true};
$params['rules'][$descripcion] = {"required": true};
$params['rules'][$anio] = {"required": true, "digits": true, "maxlength": 4, "minlength": 4};
$params['rules'][$codigoPostal] = {"required": true, "digits": true, "maxlength": 5, "minlength": 5};
jQuery("#formCotizar").validate($params);
/*jQuery("#formCotizar").ajaxSubmit({
success: function(response){
jQuery.fancybox({
'content' : response
});
}
}); */
var options = {
//target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
jQuery("#formCotizar").ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
setTimeout(jQuery.fancybox({
'content': "<h1>Calculando cotización</h1><img src='./images/loader.gif' alt='Cargando'>",
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'scrolling' : 'no',
'type' : 'inline',
'showCloseButton' : false,
'hideOnOverlayClick' : false,
'hideOnContentClick' : false
})
, 5000 );
return jQuery("#formCotizar").valid();
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
jQuery.fancybox({
'content' : responseText,
'autoScale' : true
});
}
</script>
<div id="main-wrap">
<div class="container block">
<div id="wsite-content" class="wsite-elements wsite-not-footer">
<h2 style="text-align:left;">Busque la cotización para su auto: </h2>
<div>
<form id="formCotizar" action="cotizar.php" method="POST">
<div id="form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist">
<div>
<div class="wsite-multicol">
<div class="wsite-multicol-table-wrap" style="margin:0 -25px">
<table class="wsite-multicol-table">
<tbody class="wsite-multicol-tbody">
<tr class="wsite-multicol-tr">
<td class="wsite-multicol-col" style="width: 50%; padding: 0 25px;">
<label for="" class="wsite-form-label">
<h4>Marca: <span class="form-required">*</span></h4>
</label>
<div style="clear:both;"></div>
<div class="wsite-form-input-container wsite-form-left wsite-form-input">
<select name="marca" id="marca" class="wsite-form-input wsite-input">
<?php foreach ($marcas as $marca): ?>
<option value="<?php echo $marca['nombre'] ?>"><?php echo $marca['nombre'] ?></option>
<?php endforeach; ?>
</select>
</div>
</td>
<td class="wsite-multicol-col" style="width: 50%; padding: 0 25px;">
<label for="" class="wsite-form-label">
<h4>Descripción: <span class="form-required">*</span></h4>
</label>
<div style="clear:both;"></div>
<div class="wsite-form-input-container wsite-form-left wsite-form-input">
<select name="descripcion" id="descripcion" class="wsite-form-input wsite-input" disabled="disabled">
<option value="">-- Seleccione --</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="wsite-multicol-col" style="width: 50%; padding: 0 25px;">
<div class="wsite-form-field wsite-name-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="input-657946935232370654">Año: <span class="form-required">*</span></label>
<div style="clear:both;"></div>
<div class="wsite-form-input-container wsite-form-left wsite-form-input-first-name">
<input id="anio" class="wsite-form-input wsite-input" type="text" name="anio" />
</div>
<div id="instructions-657946935232370654" class="wsite-form-instructions" style="display:none;">Ingrese el año, ejemplo: 1998.</div>
</div>
</td>
<td class="wsite-multicol-col" style="width: 50%; padding: 0 25px;">
<div class="wsite-form-field wsite-name-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="input-657946935232370654">Código postal: <span class="form-required">*</span></label>
<div style="clear:both;"></div>
<div class="wsite-form-input-container wsite-form-left wsite-form-input-first-name">
<input id="codigo_postal" class="wsite-form-input wsite-input" type="text" name="codigo_postal" />
</div>
<div id="instructions-657946935232370654" class="wsite-form-instructions" style="display:none;">Ingrese el código postal de su localidad, sólo números.</div>
</div>
</td>
</tr>
<tr class="wsite-multicol-tr">
<td></td>
<td class="wsite-multicol-col" style="width: 50%; padding: 0 25px;">
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<a class="wsite-button" onclick="jQuery('#formCotizar').submit(); return false;">
<span class="wsite-button-inner">Cotizar</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</ul>
</div>
</form>
</div>
</div>
</div><!-- end container -->
</div><!-- end banner-wrap -->
<div id="footer-wrap">
<div class="container block">
<div class='wsite-elements wsite-footer'>
<div><div class="wsite-multicol"><div class='wsite-multicol-table-wrap' style='margin:0 -25px'>
<table class='wsite-multicol-table'>
<tbody class='wsite-multicol-tbody'>
<tr class='wsite-multicol-tr'>
<td class='wsite-multicol-col' style='width:50%;padding:0 25px'>
<div class="paragraph" style="text-align:left;"><br /><span></span><br /><span></span>Agentes autorizados por la CNSF</div>
</td>
<td class='wsite-multicol-col' style='width:50%;padding:0 25px'>
<div><div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/3/3/7/0/3370835/3731551_orig.jpg" alt="Picture" style="width:100%;max-width:288px" />
</a>
<div style="display:block;font-size:90%"></div>
</div></div>
</td>
</tr>
</tbody>
</table>
</div></div></div></div><script type='text/javascript'>
<!--
if (document.cookie.match(/(^|;)\s*is_mobile=1/)) {
var windowHref = window.location.href || '';
if (windowHref.indexOf('?') > -1) {
windowHref += '&';
} else {
windowHref += '?';
}
document.write(
"&nbsp;&nbsp;&nbsp;&nbsp;" +
"<a class='wsite-view-link-mobile' href='" + windowHref + "view=mobile'>Mobile Site</a>"
);
}
//-->
</script>
</div><!-- end container -->
</div><!-- end footer-wrap -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1020467146;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020467146/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32860136-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment