Pregunta:
Fecha: 22-06-2016 06:36:29
(En Español)
dejo el código y el form, se que es algo largo pero requiero ayuda :(
y el formulario
Problema en validación de formulario por medio de Javascript y PHP[Resuelta]
hola tengo el sigueinte codigo javascript, al momento de validar pasa y rellena el formulario, la idea es que si arroja alguno de los errores me devuelva al form y no me ejecute el formulariodejo el código y el form, se que es algo largo pero requiero ayuda :(
<SCRIPT LANGUAGE="javascript">
<!-- Original: Simon Tneoh (tneohcb@pc.jaring.my) -->
<!-- This script and many more are available free online at -->
<!-- The javascript Source!! http://javascript.internet.com -->
<!-- Begin
var Cards = new makeArray(8);
Cards[0] = new CardType("MasterCard", "51,52,53,54,55", "16");
var MasterCard = Cards[0];
Cards[1] = new CardType("VisaCard", "4", "13,16");
var VisaCard = Cards[1];
Cards[2] = new CardType("AmExCard", "34,37", "15");
var AmExCard = Cards[2];
Cards[3] = new CardType("DinersClubCard", "30,36,38", "14");
var DinersClubCard = Cards[3];
Cards[4] = new CardType("DiscoverCard", "6011", "16");
var DiscoverCard = Cards[4];
Cards[5] = new CardType("enRouteCard", "2014,2149", "15");
var enRouteCard = Cards[5];
Cards[6] = new CardType("JCBCard", "3088,3096,3112,3158,3337,3528", "16");
var JCBCard = Cards[6];
var LuhnCheckSum = Cards[7] = new CardType();
/*************************************************************************\
CheckCardNumber(form)
function called when users click the "check" button.
\*************************************************************************/
function CheckCardNumber(form) {
var tmpyear;
if (form.CardNumber.value.length == 0) {
alert("Por favor ingrese la tarjeta.");
form.CardNumber.focus();
return;
}
if (form.ExpYear.value.length == 0) {
alert("Por favor ingrese el año de vencimiento.");
form.ExpYear.focus();
return;
}
if (form.ExpYear.value > 96)
tmpyear = "19" + form.ExpYear.value;
else if (form.ExpYear.value < 21)
tmpyear = "20" + form.ExpYear.value;
else {
alert("El año de vencimiento es invalido.");
return;
}
tmpmonth = form.ExpMon.options[form.ExpMon.selectedIndex].value;
// The following line doesn't work in IE3, you need to change it
// to something like "(new CardType())...".
// if (!CardType().isExpiryDate(tmpyear, tmpmonth)) {
if (!(new CardType()).isExpiryDate(tmpyear, tmpmonth)) {
alert("Esta tarjeta ya esta vencida.");
return;
}
card = form.CardType.options[form.CardType.selectedIndex].value;
var retval = eval(card + ".checkCardNumber(\"" + form.CardNumber.value +
"\", " + tmpyear + ", " + tmpmonth + ");");
cardname = "";
if (retval)
// comment this out if used on an order form
alert("Este número de la tarjeta parece ser válida.");
else {
// The cardnumber has the valid luhn checksum, but we want to know which
// cardtype it belongs to.
for (var n = 0; n < Cards.size; n++) {
if (Cards[n].checkCardNumber(form.CardNumber.value, tmpyear, tmpmonth)) {
cardname = Cards[n].getCardType();
break;
}
}
if (cardname.length > 0) {
alert("Esto parece ser una " + cardname + " numero de " + card + " numero.");
}
else {
alert("La tarjeta no es valida.");
}
}
}
/*************************************************************************\
Object CardType([String cardtype, String rules, String len, int year,
int month])
cardtype : type of card, eg: MasterCard, Visa, etc.
rules : rules of the cardnumber, eg: "4", "6011", "34,37".
len : valid length of cardnumber, eg: "16,19", "13,16".
year : year of expiry date.
month : month of expiry date.
eg:
var VisaCard = new CardType("Visa", "4", "16");
var AmExCard = new CardType("AmEx", "34,37", "15");
\*************************************************************************/
function CardType() {
var n;
var argv = CardType.arguments;
var argc = CardType.arguments.length;
this.objname = "object CardType";
var tmpcardtype = (argc > 0) ? argv[0] : "CardObject";
var tmprules = (argc > 1) ? argv[1] : "0,1,2,3,4,5,6,7,8,9";
var tmplen = (argc > 2) ? argv[2] : "13,14,15,16,19";
this.setCardNumber = setCardNumber; // set CardNumber method.
this.setCardType = setCardType; // setCardType method.
this.setLen = setLen; // setLen method.
this.setRules = setRules; // setRules method.
this.setExpiryDate = setExpiryDate; // setExpiryDate method.
this.setCardType(tmpcardtype);
this.setLen(tmplen);
this.setRules(tmprules);
if (argc > 4)
this.setExpiryDate(argv[3], argv[4]);
this.checkCardNumber = checkCardNumber; // checkCardNumber method.
this.getExpiryDate = getExpiryDate; // getExpiryDate method.
this.getCardType = getCardType; // getCardType method.
this.isCardNumber = isCardNumber; // isCardNumber method.
this.isExpiryDate = isExpiryDate; // isExpiryDate method.
this.luhnCheck = luhnCheck;// luhnCheck method.
return this;
}
/*************************************************************************\
boolean checkCardNumber([String cardnumber, int year, int month])
return true if cardnumber pass the luhncheck and the expiry date is
valid, else return false.
\*************************************************************************/
function checkCardNumber() {
var argv = checkCardNumber.arguments;
var argc = checkCardNumber.arguments.length;
var cardnumber = (argc > 0) ? argv[0] : this.cardnumber;
var year = (argc > 1) ? argv[1] : this.year;
var month = (argc > 2) ? argv[2] : this.month;
this.setCardNumber(cardnumber);
this.setExpiryDate(year, month);
if (!this.isCardNumber())
return false;
if (!this.isExpiryDate())
return false;
return true;
}
/*************************************************************************\
String getCardType()
return the cardtype.
\*************************************************************************/
function getCardType() {
return this.cardtype;
}
/*************************************************************************\
String getExpiryDate()
return the expiry date.
\*************************************************************************/
function getExpiryDate() {
return this.month + "/" + this.year;
}
/*************************************************************************\
boolean isCardNumber([String cardnumber])
return true if cardnumber pass the luhncheck and the rules, else return
false.
\*************************************************************************/
function isCardNumber() {
var argv = isCardNumber.arguments;
var argc = isCardNumber.arguments.length;
var cardnumber = (argc > 0) ? argv[0] : this.cardnumber;
if (!this.luhnCheck())
return false;
for (var n = 0; n < this.len.size; n++)
if (cardnumber.toString().length == this.len[n]) {
for (var m = 0; m < this.rules.size; m++) {
var headdigit = cardnumber.substring(0, this.rules[m].toString().length);
if (headdigit == this.rules[m])
return true;
}
return false;
}
return false;
}
/*************************************************************************\
boolean isExpiryDate([int year, int month])
return true if the date is a valid expiry date,
else return false.
\*************************************************************************/
function isExpiryDate() {
var argv = isExpiryDate.arguments;
var argc = isExpiryDate.arguments.length;
year = argc > 0 ? argv[0] : this.year;
month = argc > 1 ? argv[1] : this.month;
if (!isNum(year+""))
return false;
if (!isNum(month+""))
return false;
today = new Date();
expiry = new Date(year, month);
if (today.getTime() > expiry.getTime())
return false;
else
return true;
}
/*************************************************************************\
boolean isNum(String argvalue)
return true if argvalue contains only numeric characters,
else return false.
\*************************************************************************/
function isNum(argvalue) {
argvalue = argvalue.toString();
if (argvalue.length == 0)
return false;
for (var n = 0; n < argvalue.length; n++)
if (argvalue.substring(n, n+1) < "0" || argvalue.substring(n, n+1) > "9")
return false;
return true;
}
/*************************************************************************\
boolean luhnCheck([String CardNumber])
return true if CardNumber pass the luhn check else return false.
Reference: http://www.ling.nwu.edu/~sburke/pub/luhn_lib.pl
\*************************************************************************/
function luhnCheck() {
var argv = luhnCheck.arguments;
var argc = luhnCheck.arguments.length;
var CardNumber = argc > 0 ? argv[0] : this.cardnumber;
if (! isNum(CardNumber)) {
return false;
}
var no_digit = CardNumber.length;
var oddoeven = no_digit & 1;
var sum = 0;
for (var count = 0; count < no_digit; count++) {
var digit = parseInt(CardNumber.charAt(count));
if (!((count & 1) ^ oddoeven)) {
digit *= 2;
if (digit > 9)
digit -= 9;
}
sum += digit;
}
if (sum % 10 == 0)
return true;
else
return false;
}
/*************************************************************************\
ArrayObject makeArray(int size)
return the array object in the size specified.
\*************************************************************************/
function makeArray(size) {
this.size = size;
return this;
}
/*************************************************************************\
CardType setCardNumber(cardnumber)
return the CardType object.
\*************************************************************************/
function setCardNumber(cardnumber) {
this.cardnumber = cardnumber;
return this;
}
/*************************************************************************\
CardType setCardType(cardtype)
return the CardType object.
\*************************************************************************/
function setCardType(cardtype) {
this.cardtype = cardtype;
return this;
}
/*************************************************************************\
CardType setExpiryDate(year, month)
return the CardType object.
\*************************************************************************/
function setExpiryDate(year, month) {
this.year = year;
this.month = month;
return this;
}
/*************************************************************************\
CardType setLen(len)
return the CardType object.
\*************************************************************************/
function setLen(len) {
// Create the len array.
if (len.length == 0 || len == null)
len = "13,14,15,16,19";
var tmplen = len;
n = 1;
while (tmplen.indexOf(",") != -1) {
tmplen = tmplen.substring(tmplen.indexOf(",") + 1, tmplen.length);
n++;
}
this.len = new makeArray(n);
n = 0;
while (len.indexOf(",") != -1) {
var tmpstr = len.substring(0, len.indexOf(","));
this.len[n] = tmpstr;
len = len.substring(len.indexOf(",") + 1, len.length);
n++;
}
this.len[n] = len;
return this;
}
/*************************************************************************\
CardType setRules()
return the CardType object.
\*************************************************************************/
function setRules(rules) {
// Create the rules array.
if (rules.length == 0 || rules == null)
rules = "0,1,2,3,4,5,6,7,8,9";
var tmprules = rules;
n = 1;
while (tmprules.indexOf(",") != -1) {
tmprules = tmprules.substring(tmprules.indexOf(",") + 1, tmprules.length);
n++;
}
this.rules = new makeArray(n);
n = 0;
while (rules.indexOf(",") != -1) {
var tmpstr = rules.substring(0, rules.indexOf(","));
this.rules[n] = tmpstr;
rules = rules.substring(rules.indexOf(",") + 1, rules.length);
n++;
}
this.rules[n] = rules;
return this;
}
// End -->
</script>
y el formulario
<form id="ThisForm" name="ThisForm" method="post" action="<?php $_PHP_SELF ?>">
<div class="form-body">
<div class="spacer-b30">
<div class="tagline"><span> Detalles del pago </span></div><!-- .tagline -->
</div>
<div class="section">
<p class="small-text fine-grey"> 1 -Seleccione el Tipo de tarjeta</p>
<p class="small-text fine-grey"> 2 - Escriba los slots como corresponden</p>
<p class="small-text fine-grey"> 3 - Reemplaze los valores XX to __ los numeros correspondientes</p>
</div><!-- end section -->
<div class="frm-row">
<div class="section">Aceptar los datos financieros
<input type="radio" name="rad" onclick="cardtype.disabled = false;cardnom.disabled = false;creditcard.disabled = false;cardmonth.disabled = false;cardyear.disabled = false;secno.disabled = false;secno.disabled = false;valor.disabled = false;cuotas.disabled = false;banco.disabled = false;" required/>
</div><!-- end section -->
<div class="section">
<label for="cardname" class="field prepend-icon">
<input required type="text" name="ide_per" id="ide_per" class="gui-input" placeholder="Id del cliente">
<b class="tooltip tip-left-top"><em>Importante Poner el codigo exacto o si no la venta será invalidada</em></b>
<label for="ide_per" class="field-icon"><i class="fa fa-user"></i></label>
</label>
</div><!-- end section -->
<div class="section colm colm6">
<label for="cardtype" class="field-label">Tipo de tarjeta</label>
<label for="cardtype" class="field select">
<select disabled="disabled" id="cardtype" name="CardType">
<option value="MasterCard">MasterCard
<option value="VisaCard">Visa
<option value="AmExCard">American Express
<option value="DinersClubCard">Diners Club
<option value="DiscoverCard">Discover
<option value="enRouteCard">enRoute
<option value="JCBCard">JCB
</select>
<i class="arrow double"></i>
</label>
</div><!-- end .section section -->
<div class="section colm colm6">
<label for="creditcard" class="field-label">Credit Card Number</label>
<label for="creditcard" class="field">
<div class="col-xs-5">
<input required disabled="disabled" type="text" id="creditcard" name = "CardNumber" class="gui-input" placeholder="Numero de la tarjeta">
</label>
</div>
</div><!-- end .section section -->
<div class="fmx">
<div class="section">
<label for="cardname" class="field prepend-icon">
<input required disabled="disabled" type="text" name="cardnom" id="cardnom" class="gui-input" placeholder="Nombre en la tarjeta...">
<label for="cardname" class="field-icon"><i class="fa fa-user"></i></label>
</label>
</div><!-- end section -->
</div><!-- end frm-row section -->
<div class="frm-row">
<div class="section colm colm6">
<label for="cardmonth" class="field select">
<select disabled="disabled" id="cardmonth" name="ExpMon">
<option value="">Mes de vencimiento</option>
<option value="1">01 - Ene</option>
<option value="2">02 - Feb</option>
<option value="3">03 - Mar</option>
<option value="4">04 - Abr</option>
<option value="5">05 - May</option>
<option value="6">06 - Jun</option>
<option value="7">07 - Jul</option>
<option value="8">08 - Ago</option>
<option value="9">09 - Sep</option>
<option value="10">10 - Oct</option>
<option value="11">11 - Nov</option>
<option value="12">12 - Dec</option>
</select>
<i class="arrow double"></i>
</label>
</div><!-- end section -->
<div class="section colm colm6">
<label class="field select">
<select disabled="disabled" id="cardyear" name="ExpYear">
<option value="">Año de vencimiento...</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<i class="arrow double"></i>
</label>
</div><!-- end section -->
</div><!-- end frm-row section -->
<div class="frm-row">
<div class="section colm colm6">
<label for="secno" class="field prepend-icon">
<input required disabled="disabled" type="text" name="secno" id="secno" class="gui-input" placeholder="Security number...">
<b class="tooltip tip-left-top"><em> Es el codigo que esta en la parte posterior del plastico </em></b>
<label for="secno" class="field-icon"><i class="fa fa-barcode"></i></label>
</label>
</div>
<div class="section colm colm6">
<a class="button btn-primary" id="validar" href="veritarjeta" target="_blank" onClick="window.open(this.href, this.target, 'width=400,height=300,scrollbars=yes'); return false;" >Validar tarjeta</a> </p>
</div><!-- end section --><!-- end section -->
<div class="section colm colm6">
<label for="cardtype" class="field-label">Valor de la venta</label>
<label for="valor" class="field prepend-icon">
<input required disabled="disabled" type="text" name="valor" id="valor" class="gui-input" placeholder="Valor del producto...">
<label for="valor" class="field-icon"><i class="fa fa-user"></i></label>
</label>
</div><!-- end section -->
<div class="section colm colm6">
<label for="cardtype" class="field-label">Cuotas de la venta</label>
<label class="field select">
<select disabled="disabled" id="cuotas" name="cuotas">
<option value="12">12</option>
<option value="6">6</option>
<option value="24">24</option>
<option value="48">48</option>
<option value="72">72</option>
</select>
<i class="arrow double"></i> </label>
</div>
<div class="section">
<label for="cardname" class="field prepend-icon">
<input required disabled="disabled" type="text" name="banco" id="banco" class="gui-input" placeholder="Banco de la tarjeta...">
<label for="cardname" class="field-icon"><i class="fa fa-user"></i></label>
</label>
</div><!-- end section -->
</div><!-- end frm-row section -->
<div class="spacer-t20 spacer-b30">
<div class="tagline"><span> Direcciòn de envio</span></div>
<!-- .tagline -->
</div>
<div class="section">
<label for="firstaddr" class="field prepend-icon">
<input type="text" name="firstaddr" id="firstaddr" class="gui-input" placeholder="Dirección">
<label for="firstaddr" class="field-icon"><i class="fa fa-building-o"></i></label>
</label>
</div><!-- end section -->
</div><!-- end .frm-row section -->
</div><!-- end .form-body section -->
<div class="form-footer">
<input name = "add" type = "submit" class="button btn-black" id = "add" OnClick="CheckCardNumber(this.form)"
value = "REGISTRAR MEDIO DE PAGO">
<p>
</p>
</div><!-- end .form-footer section -->
</form>
Votos: 1 -
Respuestas: 4 -
Vistas: 10
Compartir en: Google
Facebook
Twitter
LinkedIn
Link
Respuestas:
-
Fecha: 23-06-2016 09:22:56 Buenas tardes Bryan, ah que te refieres cuando dices "no me ejecute el formulario". Por que ejemplo estuve probando el código que dejaste y doy a Registrar medio de pago me muestra el error y lleva el foco. Votos: 0 - Link respuesta
-
-
Fecha: 23-06-2016 19:19:29 Disculpa, miento para que me lleve el foco primero tengo que darle en el radio button que seria Aceptar los datos financieros y despues cuando doy al Registrar medio de pago me lanza un alert con este error "Por favor ingrese la tarjeta" y el foco se lo lleva el campo id cliente ide_per Creo que ahi esta media mal la validación.. Por que me tendria que decir "Por favor ingrese numero del cliente". Votos: 0 - Link respuesta
-
Fecha: 24-06-2016 19:27:52 mmm es que la validacion solo la hago para la tarjeta de credito y algunos select de resto los otros campos se validan por medio de html! Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
