Validar campos a medida que se activen divs Les queria hacer la siguiente consulta.!
Yo tengo 2 funciones js, una que es para ocultar/mostrar divs y otra q es para validar el formulario..
Lo que yo oculto y muestro son campos del formulario, para serle mas explicito es un formulario de compra y los divs ocultan cantidad de productos.. dependiendo de la cantidad de productos que elijan es la cantidad de campos que aparecen..
para ello utilizo este script
Código:
y para validar los formularios utilizo <script type="text/javascript">
function mostrardiv(Cantidad)
{
for(i=1;i<=10;i++)
{
document.getElementById('div_'+i).style.display = 'none';
if(i<=Cantidad)
{
document.getElementById('div_'+i).style.display = 'block';
}
}
}
</script>
Código:
lo que necesito realizar es validar los campos a medida que el cliente valla activando los productos, es decir que si elije como cantidad 2 productos solo valide y haga obligatorios los campos para esos 2 productos.. y el resto no porque estan ocultos.. $(function() {
var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
var numreg = /^(\d{0,9})$/;
var letreg = /^[A-Za-z]+$/;
var pwreg = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,20})$/;
var namereg = /^[A-Z]+[a-z]+ [A-Z]+[a-z]/;
$('.error').hide();
$('input.form-poshytip').css({backgroundColor:"#FFFFFF"});
$('input.form-poshytip').focus(function(){
$(this).css({backgroundColor:"#cFF"});
});
$('select.form-poshytip').focus(function(){
$(this).css({backgroundColor:"#cFF"});
});
$('input.form-poshytip').error(function(){
$(this).css({backgroundColor:"#f99"});
});
$('select.form-poshytip').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$('input.form-poshytip').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$("#name, #dni, #pais, #mail1, #mail2, #prov, #ciudad, #pw, #hname, #rcon").keyup(function(){
if( $(this).val() != "lkkjaswjasdASWASDjuiquansuqw213ADW23ad" ){
$(".error").fadeOut();
return false;
}
});
$("#reppw").keyup(function(){
if( $(this) != "lkkjaswjasdASWASDjuiquansuqw213ADW23ad" ){
$(".error").fadeOut();
return false;
}
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var dni = $("input#dni").val();
if (dni == "") {
$("label#dni_error").show();
$("input#dni").focus();
return false;
}
var dni = $("input#dni").val();
if (!numreg.test($("#dni").val())) {
$("label#dni2_error").show();
$("input#dni").focus();
return false;
}
var mail1 = $("input#mail1").val();
if (mail1 == "") {
$("label#mail1_error").show();
$("input#mail1").focus();
return false;
}
var mail1 = $("input#mail1").val();
if (!emailreg.test($("#mail1").val())) {
$("label#mail12_error").show();
$("input#mail1").focus();
return false;
}
var mail2 = $("input#mail2").val();
if (mail2 == "") {
$("label#mail2_error").show();
$("input#mail2").focus();
return false;
}
var mail2 = $("input#mail2").val();
if (!emailreg.test($("#mail2").val())) {
$("label#mail22_error").show();
$("input#mail2").focus();
return false;
}
var mail2 = $("input#mail2").val();
if (mail2 == mail1) {
$("label#mail23_error").show();
$("input#mail2").focus();
return false;
}
var pais = $("input#pais").val();
if (pais == "") {
$("label#pais_error").show();
$("input#pais").focus();
return false;
}
var prov = $("input#prov").val();
if (prov == "") {
$("label#prov_error").show();
$("input#prov").focus();
return false;
}
var ciudad = $("input#ciudad").val();
if (ciudad == "") {
$("label#ciudad_error").show();
$("input#ciudad").focus();
return false;
}
var pw = $("input#pw").val();
if (pw == "") {
$("label#pw_error").show();
$("input#pw").focus();
return false;
}
var pw = $("input#pw").val();
if (!pwreg.test($("#pw").val())) {
$("label#pw2_error").show();
$("input#pw").focus();
return false;
}
var reppw = $("input#reppw").val();
if (reppw == "" || pw != reppw) {
$("label#reppw_error").show();
$("input#reppw").focus();
return false;
}
var hname = $("input#hname").val();
if (hname == "") {
$("label#hname_error").show();
$("input#hname").focus();
return false;
}
var slot = document.getElementById('slot').value;
if (slot == "") {
$("label#slot_error").show();
$("slot").focus();
return false;
}
var rcon = $("input#rcon").val();
if (rcon == pw) {
$("label#rcon2_error").show();
$("input#rcon").focus();
return false;
}
var rcon = $("input#rcon").val();
if (rcon == "") {
$("label#rcon_error").show();
$("input#rcon").focus();
return false;
}
var pago = document.getElementById('pago').value;
if (pago == "23") {
$("label#pago_error").show();
$("pago").focus();
return false;
}
var dataString = 'name='+ name + '&dni=' + dni + '&mail1=' + mail1 + '&mail2=' + mail2 + '&pais=' + pais + '&prov=' + prov + '&ciudad=' + ciudad + '&pw=' + pw + '&reppw=' + reppw + '&hname=' + hname + '&slot=' + slot + '&rcon=' + rcon + '&pago=' + pago ;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "js2/process.php",
data: dataString,
success: function() {
$('#compra_form').html("<div id='message'></div>");
$('#message').html("<div align='center'><img id='checkmark' src='images/check.png' /> Su pedido fue enviado. En instantes recibiras la boleta para que pueda realizar el pago.</div>")
.append("")
.hide()
.fadeIn(1500, function() {
$('#message').append("");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
