¿Cómo puedo especificar un formato de fecha personalizado para validarlo con el complemento de validación para jQuery?
¿Cómo puedo especificar un formato de fecha personalizado para validarlo con el complemento de validación para jQuery?
Respuestas:
Puede crear su propio método de validación personalizado utilizando la addMethodfunción. Supongamos que desea validar "dd / mm / aaaa":
$.validator.addMethod(
"australianDate",
function(value, element) {
// put your own logic here, this is just a (crappy) example
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Please enter a date in the format dd/mm/yyyy."
);
Y luego en su formulario agregue:
$('#myForm')
.validate({
rules : {
myDate : {
australianDate : true
}
}
})
;
myDateel nombre del campo de entrada de fecha.
La respuesta de nickf es buena, pero tenga en cuenta que el complemento de validación ya incluye validadores para varios otros formatos de fecha, en el archivo additional-methods.js. Antes de escribir el suyo, asegúrese de que alguien no lo haya hecho todavía.
Yo personalmente uso la muy buena biblioteca http://www.datejs.com/ .
Docco aquí: http://code.google.com/p/datejs/wiki/APIDocumentation
Puede utilizar lo siguiente para obtener su formato australiano y validará el día bisiesto 29/02/2012 y no el 29/02/2011:
jQuery.validator.addMethod("australianDate", function(value, element) {
return Date.parseExact(value, "d/M/yyyy");
});
$("#myForm").validate({
rules : {
birth_date : { australianDate : true }
}
});
También utilizo el complemento de entrada enmascarado para estandarizar los datos http://digitalbush.com/projects/masked-input-plugin/
$("#birth_date").mask("99/99/9999");
A continuación, se muestra un ejemplo de un nuevo método de validación que validará casi cualquier formato de fecha, incluidos:
Luego, cuando pasa el valor al php, puede convertirlo con strtotime
A continuación se explica cómo agregar el método:
$.validator.addMethod("anyDate",
function(value, element) {
return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2])[/., -](19|20)?\d{2}$/);
},
"Please enter a date in the format!"
);
Luego agrega el nuevo filtro con:
$('#myForm')
.validate({
rules : {
field: {
anyDate: true
}
}
})
;
mmm, he usado ligeramente modificada la expresión regular a/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2}$/
Aquí hay una muestra de código específico que funcionó para mí recientemente:
// Replace the builtin US date validation with UK date validation
$.validator.addMethod(
"date",
function ( value, element ) {
var bits = value.match( /([0-9]+)/gi ), str;
if ( ! bits )
return this.optional(element) || false;
str = bits[ 1 ] + '/' + bits[ 0 ] + '/' + bits[ 2 ];
return this.optional(element) || !/Invalid|NaN/.test(new Date( str ));
},
"Please enter a date in the format dd/mm/yyyy"
);
Debo señalar que esto realmente reemplaza la rutina de validación de fecha incorporada, aunque no pude ver que esto debería causar un problema con el complemento actual.
Luego apliqué esto al formulario usando:
$( '#my_form input.date' ).rules( 'add', { date: true } );
Este soy yo combinando / modificando publicaciones anteriores para lograr el resultado deseado:
// Override built-in date validator
$.validator.addMethod(
"date",
function (value, element) {
//Return NB: isRequired is not checked at this stage
return (value=="")? true : isDate(value);
},
"* invalid"
);
Agregue la validación de fecha después de su configuración de validación. Es decir, después de llamar al método $ (formulario) .validate ({...}).
//Add date validation (if applicable)
$('.date', $(frmPanelBtnId)).each(function () {
$(this).rules('add', {
date: true
});
});
Finalmente, la función principal isDate Javascript modificada para el formato de fecha del Reino Unido
//Validates a date input -- http://jquerybyexample.blogspot.com/2011/12/validate-date- using-jquery.html
function isDate(txtDate) {
var currVal = txtDate;
if (currVal == '')
return false;
//Declare Regex
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = currVal.match(rxDatePattern); // is format OK?
if (dtArray == null)
return false;
//Checks for dd/mm/yyyy format.
var dtDay = dtArray[1];
var dtMonth = dtArray[3];
var dtYear = dtArray[5];
if (dtMonth < 1 || dtMonth > 12)
return false;
else if (dtDay < 1 || dtDay > 31)
return false;
else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
return false;
else if (dtMonth == 2) {
var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
if (dtDay > 29 || (dtDay == 29 && !isleap))
return false;
}
return true;
}
Jon, tienes algunos errores de sintaxis, mira a continuación, esto funcionó para mí.
<script type="text/javascript">
$(document).ready(function () {
$.validator.addMethod(
"australianDate",
function (value, element) {
// put your own logic here, this is just a (crappy) example
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Please enter a date in the format dd/mm/yyyy"
);
$('#testForm').validate({
rules: {
"myDate": {
australianDate: true
}
}
});
});
$.validator.addMethod("mydate", function (value, element) {
return this.optional(element) || /^(\d{4})(-|\/)(([0-1]{1})([1-2]{1})|([0]{1})([0-9]{1}))(-|\/)(([0-2]{1})([1-9]{1})|([3]{1})([0-1]{1}))/.test(value);
});
puedes ingresar como yyyy-mm-ddtambiényyyy/mm/dd
pero no puedo juzgar el tamaño del mes en algún momento de febrero, solo 28 o 29 días.
Echa un vistazo: jQuery Masked Input Plugin
@blasteralfred:
Obtuve la siguiente regla que valida la fecha correcta para mí (DD MM AAAA)
jQuery.validator.addMethod(
"validDate",
function(value, element) {
return value.match(/(?:0[1-9]|[12][0-9]|3[01]) (?:0[1-9]|1[0-2]) (?:19|20\d{2})/);
},
"Please enter a valid date in the format DD MM YYYY"
);
Para DD / MM / AAAA
jQuery.validator.addMethod(
"validDate",
function(value, element) {
return value.match(/(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/);
},
"Please enter a valid date in the format DD/MM/YYYY"
);
Esto no validará el 13 de enero de 2017 y el 13 de enero de 2017.
Y tampoco valida 50 12 2017 y 50/12/2017.
Es fácil, ejemplo: válido para HTML5 tipo automático = "fecha" .
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_es.js"></script>
$(function () {
// Overload method default "date" jquery.validate.min.js
$.validator.addMethod(
"date",
function(value, element) {
var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
return value.match(dateReg);
},
"Invalid date"
);
// Form Demo jquery.validate.min.js
$('#form-datos').validate({
submitHandler: function(form) {
form.submit();
}
});
});
// put your own logic here, this is just a (crappy) example