Formato de fecha personalizado con el complemento de validación de jQuery

Question

¿Cómo puedo especificar un formato de fecha personalizado para validar con el Validation Plugin para jQuery?

Answer 1

Puede crear su propio método de validación personalizado utilizando la función addMethod. Decir que quería 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 el formulario de complemento: Respuesta

$('#myForm') 
    .validate({ 
     rules : { 
      myDate : { 
       australianDate : true 
      } 
     } 
    }) 
; 

Answer 2

de nickf es bueno, pero tenga en cuenta que el plug-in de validación ya incluye validadores para muchos otros formatos de fecha, en el archivo additional-methods.js. Antes de escribir el suyo, asegúrese de que alguien aún no lo haya hecho.

Answer 3

Salida: jQuery Masked Input Plugin

Answer 4

Jon, que tiene algunos errores de sintaxis, véase más adelante, 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 
     } 
    } 
    }); 

});    

Answer 5

Yo personalmente uso la muy buena http://www.datejs.com/ biblioteca.

Docco aquí: http://code.google.com/p/datejs/wiki/APIDocumentation

Usted puede usar lo siguiente para obtener su formato de Australia y validará el día bisiesto 29/02/2012 y 29/02/2011 No:

jQuery.validator.addMethod("australianDate", function(value, element) { 
    return Date.parseExact(value, "d/M/yyyy"); 
}); 

$("#myForm").validate({ 
    rules : { 
     birth_date : { australianDate : true } 
    } 
}); 

también utilizar el plugin de entrada enmascarada para estandarizar los datos http://digitalbush.com/projects/masked-input-plugin/

$("#birth_date").mask("99/99/9999"); 

Answer 6

Aquí está un ejemplo de código específico que trabajó 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 notar 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 aplica esto a la forma usando:

$('#my_form input.date').rules('add', { date: true }); 

Answer 7

$.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); 

    }); 

que se puede indicar como yyyy-mm-dd también yyyy/mm/dd

pero no puede juzgar el tamaño del mes en algún momento simplemente febrero 28 o 29 días.

Answer 8

Este soy yo combinación/modificar los mensajes 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" 
     ); 

Agregar validación Fecha después de que su configuración de validación. Es decir. después de llamar al método $ (form) .validate ({...}).

 //Add date validation (if applicable) 
     $('.date', $(frmPanelBtnId)).each(function() { 
      $(this).rules('add', { 
       date: true 
      }); 
     }); 

Por último, la función principal ISDATE Javascript modificado para el Reino Unido Formato de fecha

//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; 
} 

Answer 9

Aquí se muestra un ejemplo de un nuevo método de validación que validará casi cualquier formato de fecha, incluyendo:

• dd/mm/aa o dd/mm/aaaa
• dd.mm.yy o dd.mm.yyyy
• dd, mm, aa o dd, mm, aaaa
• dd mm aa o mm aaaa dd
• dd-mm-aa o dd-mm-aaaa

Entonces, cuando se pasa el valor a el php se puede convertir con strtotime

Aquí está 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 se agrega el nuevo filtro con:

$('#myForm') 
.validate({ 
    rules : { 
     field: { 
      anyDate: true 
     } 
    } 
}) 

;

Answer 10

Es fácil, por ejemplo: Válido para el tipo automático de HTML5 = "date".

<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(); 
     } 
    }); 

}); 

Answer 11

@blasteralfred:

llegué siguiente regla de validación de 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á 01 13 2017 y 01/13/2017.

Y también no valida 50 12 2017 y 50/12/2017.