Comment valider US ZIP code à l'aide de jQuery plugin de Validation

Je suis en utilisant le plugin jQuery Validation pour la validation de mon formulaire.

Je veux valider le code postal comme par US Postal format :-

> 12345
> 12345-6789
> 12345 6789

Comme pour mon actuelle code son valider le code postal doit être au maximum de 5 et tous numériques.

Veuillez voir le code ci-dessous:

    <script src="~/Scripts/js/jquery.validate.js"></script>
<script>
$().ready(function () {
//validate signup form on keyup and submit
$("#locationSetup").validate({
rules: {
'Address.AddressStreet': "required",
'Address.City': "required",
'Address.State.Country.CountryIsoCode': "required",
'Address.State.SubnationalIsoCode': "required",
'Address.PostalCode': {
required: true,
minlength: 5,
maxlength: 5,
digits: true
}
},
messages: {
'Address.AddressStreet': "Please enter your Street Address!",
'Address.City': "Please select your City!",
'Address.State.Country.CountryIsoCode': "Please  select your Country!",
'Address.State.SubnationalIsoCode': "Please  select your State!",
'Address.PostalCode': {
required: "Please enter your Postal Code!",
minlength: "Your Postal Code must be 5 numbers!",
maxlength: "Your Postal Code must be 5 numbers!",
digits: "Your Postal Code must be 5 numbers!"
}
}
});
});
</script>
@using (Html.BeginForm(Model.Step.ToString(), "Provision", FormMethod.Post, new Dictionary<string, object> { { "id", "locationSetup" } }))
<table width="100%" id="locInfo">
<colgroup>
<col width="30%" />
<col />
</colgroup>
<tr>
<th><label>@AddressResource.COUNTRY_LABEL_TEXT:</label> <span class="redtext">(Required)</span></th>
<td>
@* @Html.HiddenFor(m => m.Address.State.Country.CountryIsoCode)*@
@Html.DropDownListFor(m => m.Address.State.Country.CountryIsoCode, ProvisioningHubProxy.GetCountriesList(),
htmlAttributes: new { @id = "Countries", @name = "Countries" })
</td>
</tr>
<tr>
<th> <label>@AddressResource.STATES_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
<td> @Html.DropDownListFor(m => m.Address.State.SubnationalIsoCode, ProvisioningHubProxy.GetStatesList(),
htmlAttributes: new { @id = "States", @name = "States" })</td>
</tr>
<tr>
<th><label>@AddressResource.CITY_LABEL_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
<td> @Html.TextBoxFor(m => m.Address.City, htmlAttributes: new { @name = "City", @id = "City" })</td>
</tr>
<tr>
<th> <label>@AddressResource.STREET_NAME_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
<td>@Html.TextBoxFor(m => m.Address.AddressStreet, htmlAttributes: new { @name = "StreetName", @id = "StreetName" })</td>
</tr>
<tr>
<th><label>@AddressResource.US_POSTAL_CODE_LABEL_TEXT:</label><span class="redtext">(Required)</span></th>
<td>@Html.TextBoxFor(m => m.Address.PostalCode, htmlAttributes: new { @name = "ZipCode", @id = "ZipCode", @required = "required" })</td>
</tr>
</table>

}

S'il vous plaît suggérer.

InformationsquelleAutor UID | 2013-09-25
  1. 30

    Ajouter un validateur personnalisé:

    jQuery.validator.addMethod("zipcode", function(value, element) {
return this.optional(element) || /^\d{5}(?:-\d{4})?$/.test(value);
}, "Please provide a valid zipcode.");

    _If vous souhaitez accepter les espaces1 entre le code postal, l'utilisation /^\d{5}(?:[\s-]\d{4})?$/ pour le modèle de la place.

    puis le spécifier dans vos options:

    rules: {
...
'Address.PostalCode': {
...
zipcode: true,
...
},
...
}

    Noter que l'extension de la bibliothèque additional-methods.js a un zipcodeUS validateur ainsi (mais sauf si vous utilisez l'un de l'autre de ceux qu'il ne peut faire sens pour l'inclure).

    1 d'Après les specs, correctement mis en forme les codes postaux composé de cinq (5) chiffres ou de cinq (5) numéros de disciple par un trait d'union (-) et de quatre (4) numéros supplémentaires. Un espace ne devrait pas techniquement être acceptable, mais je vais vous donner le modèle, peu importe.

    • La regex ne pas gérer l'espace format correctement: 12345 6789
    • Mise à jour de la réponse à la pour accueillir.
    InformationsquelleAutor Brad Christie
  2. 15

    Il suffit d'inclure le additional-methods.js fichier et l'utilisation de la zipcodeUS règle.

    $("#locationSetup").validate({
rules: {
//rules,
'Address.PostalCode': {
required: true,
zipcodeUS: true //<-- use it like this
}
},
....

    Si vous ne souhaitez pas inclure la additional-methods.js de fichiers, vous pouvez copier la méthode suivante dans votre code...

    jQuery.validator.addMethod("zipcodeUS", function(value, element) {
return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value)
}, "The specified US ZIP Code is invalid");
    • si j'essaie ce qu'il me donne l'erreur TypeError: jQuery.validateur n'est pas défini. Pouvez-vous me dire ce qui me manque ici.
    • L'erreur est vous dire que la validator n'est pas défini. Il signifie simplement que vous n'avez pas correctement le plugin jQuery Validation.
    • Juste une note. Si vous utilisez le additional-methods.js assurez-vous d'obtenir la version qui correspond à la version de la validation du plugin que vous utilisez. Le fichier est ici 1.11.1 et le plus récent à ce moment que 1.12.0. Le 1.11 a donner des erreurs de la version 1.12.
    • tout ce qui devrait vraiment aller sans dire, depuis plus récents versions plugin sera toujours à venir. De toute façon, au plus tard au moment de cette réponse a été écrit 1.11.1 et je dois avoir les scores de réponses liées à la dernière à cette époque.
    InformationsquelleAutor Sparky
  3. 2

    Vous pouvez définir un validateur personnalisé:

    jQuery.validator.addMethod('zipcode', function(value, element) {
return this.optional(element) || !!value.trim().match(/^\d{5}(?:[-\s]\d{4})?$/);
}, 'Invalid zip code');

    Puis l'utiliser comme ceci

    <input class="zipcode"/>
    InformationsquelleAutor Blago
  4. 1

    Code postal routines de validation sont en additional-methods.js mais je voudrais vous demander pourquoi vous demander des informations par pays si vous allez à invalider la forme, pour tous les pays autres que les états-unis? Rappelez-vous que seulement environ 5% de la population mondiale utilise un US postal. Je vous recommande de vous rendre le code postal routines de validation dépend du pays sélectionné par l'utilisateur.

    InformationsquelleAutor Paul Smith