web-dev-qa-db-fra.com

Format de date personnalisé avec plugin de validation jQuery

Comment puis-je spécifier un format de date personnalisé à valider avec le plug-in de validation pour jQuery?

jqueryvalidationdatetime-format
82
Bruno

Vous pouvez créer votre propre méthode de validation personnalisée à l'aide de la fonction addMethod . Supposons que vous vouliez valider "jj/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."
);

Et ensuite, sur votre formulaire, ajoutez:

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

la réponse de nickf est bonne, mais notez que le plug-in de validation inclut déjà des validateurs pour plusieurs autres formats de date, dans le fichier additional-methods.js. Avant de rédiger le vôtre, assurez-vous que quelqu'un ne l’a pas déjà fait.

58
Craig Stuntz

Personnellement, j’utilise la très bonne bibliothèque http://www.datejs.com/ .

Cliquez ici: http://code.google.com/p/datejs/wiki/APIDocumentation

Vous pouvez utiliser ce qui suit pour obtenir votre format australien et validera le jour bissextile du 29/02/2012 et non du 29/02/2011:

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

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

J'utilise également le plugin d'entrée masqué pour normaliser les données http://digitalbush.com/projects/masked-input-plugin/

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

Voici un exemple de nouvelle méthode de validation permettant de valider presque tous les formats de date, notamment:

  • jj/mm/aa ou jj/mm/aaaa
  • jj.mm.aa ou jj.mm.aaaa
  • jj, mm, aa ou jj, mm, aaaa
  • jj mm aa ou jj mm aaaa
  • jj-mm-aa ou jj-mm-aaaa

Ensuite, lorsque vous transmettez la valeur au php, vous pouvez la convertir avec strtotime

Voici comment ajouter la méthode:

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

Ensuite, vous ajoutez le nouveau filtre avec:

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

;

18
Babailiica

Voici un exemple de code spécifique qui a fonctionné pour moi récemment:

// 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"
);

Je devrais noter que cela remplace en fait la routine de validation de date intégrée, bien que je ne puisse pas voir que cela devrait causer un problème avec le plugin actuel.

J'ai ensuite appliqué cela au formulaire en utilisant:

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

C'est moi qui combine/modifie les articles précédents pour obtenir le résultat souhaité:

        // 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"
        );

Ajouter la validation de la date après votre configuration de validation. C'est à dire. après avoir appelé la méthode $ (form) .validate ({...}).

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

Enfin, la fonction Javascript principale d'isDate a été modifiée pour le format de date UK

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

Jon, tu as des erreurs de syntaxe, voir ci-dessous, cela a fonctionné pour moi.

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

});
4
Chris Love
$.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);

    });

vous pouvez entrer comme yyyy-mm-dd également yyyy/mm/dd

mais je ne peux pas juger la taille du mois à un moment de 28 ou 29 jours en février.

3
mingyu

Départ: plugin d’entrée jQuery Masked

2
Ricky

@blasteralfred:

J'ai reçu la règle suivante validant la date correcte pour moi (JJ 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"

)

Pour JJ/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"

)

Cela ne validera pas le 01 13 2017 et le 13/01/2017.

Et aussi ne valide pas 50 12 2017 et 50/12/2017.

1
Rijo K P

Est facile, exemple: Valable pour HTML5 type automatique = "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();
        }
    });

});
0
Sergio