jquery.validate.js fecha de vencimiento cómo usar este método de agregar validador
Frecuentes
Visto 3,558 veces
0
Tengo un formulario de procesamiento de tarjeta de crédito con 2 campos seleccionados para la fecha de vencimiento. Me gusta esto
<select name="qbms_cc_expires_month" id="qbms_cc_expires_month"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><span class="required">*</span> <select name="qbms_cc_expires_year" id="qbms_cc_expires_year"><option value="12">2012</option><option value="13">2013</option><option value="14">2014</option><option value="15">2015</option><option value="16">2016</option><option value="17">2017</option><option value="18">2018</option><option value="19">2019</option><option value="20">2020</option><option value="21">2021</option></select>
He agregado este $.validator.addMethod
$.validator.addMethod(
"ccexpdate",
function (value, element) {
// Initialize todays date i.e start date
var today = new Date();
var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);
// Initialize End/Expiry date i.e. adding 10 years to expire
var futureLimitDate= new Date(today.getFullYear()+10,today.getMonth(),1,0,0,0,0);
var expDate = value;
var expYearCheck='';
// Check Date format
var separatorIndex = expDate.indexOf('/');
if(separatorIndex==-1)return false; // Return false if no / found
var expDateArr=expDate.split('/');
if(expDateArr.length>2)return false; // Return false if no num/num format found
// Check Month for validity
if(eval(expDateArr[0])<1||eval(expDateArr[0])>12)
{
//If month is not valid i.e not in range 1-12
return false;
}
//Check Year for format YY or YYYY
switch(expDateArr[1].length)
{
case 2:expYearCheck=2000+parseInt(expDateArr[1], 10);break; // If YY format convert it to 20YY to it
case 4:expYearCheck=expDateArr[1];break; // If YYYY format assign it to check Year Var
default:return false;break;
}
// Calculated new exp Date for ja
expDate=new Date(eval(expYearCheck),(eval(expDateArr[0])-1),1,0,0,0,0);
if(Date.parse(startDate) <= Date.parse(expDate))
{
if(Date.parse(expDate) <= Date.parse(futureLimitDate))
{
// Date validated
return true;
}else
{
// Date exceeds future date
return false;
}
}else
{
// Date is earlier than todays date
return false;
}
},
"<br />Must be a valid Expiration Date."
);
¿Cómo llamo a esto en mis reglas: { } sección? Probé este qbms_cc_expires_year: { ccexpdate: { month: '#qbms_cc_expires_month', year: '#qbms_cc_expires_year' } }, pero no funciona.
1 Respuestas
0
Me di cuenta de esto y espero que pueda ayudar a alguien que intenta lograr lo mismo. Mi problema estaba tratando de usar jquery.validate.js
y este $.validator.addMethod
debajo. Tenía 2 campos para mi fecha de vencimiento, uno para el mes MM "01" y el otro para el año AAAA "<option value="12">2012</option>"
así que los combiné en otra entrada de texto como MM/YYYY
e hizo la validación en ese campo.
$.validator.addMethod(
"ccexpdate",
function (value, element) {
// Initialize todays date i.e start date
var today = new Date();
var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);
// Initialize End/Expiry date i.e. adding 10 years to expire
var futureLimitDate= new Date(today.getFullYear()+10,today.getMonth(),1,0,0,0,0);
var expDate = value;
var expYearCheck='';
// Check Date format
var separatorIndex = expDate.indexOf('/');
if(separatorIndex==-1)return false; // Return false if no / found
var expDateArr=expDate.split('/');
if(expDateArr.length>2)return false; // Return false if no num/num format found
// Check Month for validity
if(eval(expDateArr[0])<1||eval(expDateArr[0])>12)
{
//If month is not valid i.e not in range 1-12
return false;
}
//Check Year for format YY or YYYY
switch(expDateArr[1].length)
{
case 2:expYearCheck=2000+parseInt(expDateArr[1], 10);break; // If YY format convert it to 20YY to it
case 4:expYearCheck=expDateArr[1];break; // If YYYY format assign it to check Year Var
default:return false;break;
}
// Calculated new exp Date for ja
expDate=new Date(eval(expYearCheck),(eval(expDateArr[0])-1),1,0,0,0,0);
if(Date.parse(startDate) <= Date.parse(expDate))
{
if(Date.parse(expDate) <= Date.parse(futureLimitDate))
{
// Date validated
return true;
}else
{
// Date exceeds future date
return false;
}
}else
{
// Date is earlier than todays date
return false;
}
},
"<br />Must be a valid Expiration Date."
);
Tengo dos campos para mi fecha de vencimiento de la siguiente manera:
<select name="qbms_cc_expires_month" id="qbms_cc_expires_month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="qbms_cc_expires_year" id="qbms_cc_expires_year">
<option value="12">2012</option>
<option value="13">2013</option>
<option value="14">2014</option>
<option value="15">2015</option>
<option value="16">2016</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
Agregué este campo al final de mi segunda selección:
<input type="text" name="qbmsCombined" id="qbmsCombined" value="" style="width:45px;height:16px;" readonly="readonly">
Y mi jQuery así
$().ready(function() {
// combine exp date fields and validate new field
$("#qbms_cc_expires_month,#qbms_cc_expires_year").change(function() {
$("input[type='text'][name='qbmsCombined']").val($("#qbms_cc_expires_month").val() + '/' + $("#qbms_cc_expires_year").val());
});
// validate signup form on keyup and submit
$("#checkoutForm").validate({
rules: {
qbms_cc_owner: {
required: true
},
qbms_cc_number: {
required: true,
minlength: 13,
maxlength: 16,
creditcard: true
},
qbmsCombined: {
ccexpdate: true
},
qbms_cc_cvv2: {
required: true,
minlength: 3,
maxlength: 4
},
},
messages: {
qbms_cc_owner: {
required: "<br />Please enter the name on the Credit Card"
},
qbms_cc_number: {
required: "<br />Please enter the Credit Card Number",
minlength: "<br />Credit Card Number must be between 13 and 16 digits",
maxlength: "<br />Credit Card Number is over 16 digits",
creditcard: "<br />Credit Card Number is invalid"
},
qbms_cc_cvv2: {
required: "<br />Please enter the Credit Card's Security Code",
minlength: "<br />Credit Card's Security Code must be at least 3 digits",
maxlength: "<br />Credit Card's Security Code must be 4 digits or less"
},
}
});
$('form#checkoutForm').submit(function(evt){
if($('#checkoutForm').valid())
return true
else
evt.preventDefault();
return false;
});
});
Respondido 04 ago 14, 15:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery date jquery-validate or haz tu propia pregunta.
Esto tampoco funciona qbms_cc_expires_year: { ccexpdate: { expDate: '#qbms_cc_expires_month/#qbms_cc_expires_year', } }, - Russ
Me di cuenta de esto y publicaré la respuesta tan pronto como pasen 5 horas más, como soy un novato, me están haciendo esperar. - Russ