Analyse des problèmes de tooltip d'erreur avec jquery.validate[.unobtrusive] et Bootstrap

Des articles similaires existent, voir ici, je sens que cela est un peu complexe, je songe également à écrire un simple pour le projet, quelques points clés sont enregistrés ici. L'effet final est le suivant :

Backend utilise Asp.net mvc5Les cadres frontaux incluent : jQuery.validate, jQuery.validate.unobtrusive, requirejs, Bootstrap, qui sont les plus/Version plus récente. jQuery.validate ne nécessite pas d'explication, il s'agit d'un composant de validation frontale populaire à l'heure actuelle ; jQuery.validate.unobtrusive est basé sur jQuery.validate et est conçu pour s'associer à Asp.net mvc, écrit par Microsoft lui-même, vous pouvez le trouver dans NuGet sous le nom Microsoft.jQuery.Unobtrusive.Validation. Comment l'utiliser, continuez à lire.

Tout d'abord, nous définissons la classe d'entité en arrière-plan :

/// summary>
/// Informations du fabricant
/// </summary>
public class Manufacturer : OperatedModel
{
  [Key]
  [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  public int ID { get; set; }
  /// summary>
  /// Code d'entreprise/registration number}}
  /// </summary>
  [Required(ErrorMessage = "Credit code/registration number cannot be empty")]
  [MaxLength(30)]
  public string EnterpriseNo { get; set; }
  /// summary>
  /// enterprise name
  /// </summary>
  [Required(ErrorMessage = "Enterprise name cannot be empty")]
  public string EnterpriseName { get; set; }
  /// summary>
  /// registered address
  /// </summary>
  [Required(ErrorMessage = "Registered address cannot be empty")]
  public string RegisteredAddress { get; set; }
  /// summary>
  /// legal person
  /// </summary>
  [Required(ErrorMessage = "Legal person cannot be empty")]
  public string ArtificialPerson { get; set; }
  /// summary>
  /// person in charge, person in charge
  /// </summary>
  [Required(ErrorMessage = "Person in charge cannot be empty")]
  public string PIC { get; set; }
  [Required(ErrorMessage = "Mobile number cannot be empty")]
  [RegularExpression(RegexLib.Mobile, ErrorMessage = "Incorrect mobile number format")]
  public string Mobile { get; set; }
  [EmailAddress]
  public string Email { get; set; }
  /// summary>
  /// shop number
  /// </summary>
  public string ShopNumber { get; set; }
  /// summary>
  /// store manager name
  /// </summary>
  public string StoreManagerName { get; set; }
  /// summary>
  /// store manager contact information
  /// </summary>
  [RegularExpression(RegexLib.Mobile, ErrorMessage="Incorrect mobile number format")]
  public string StoreManagerNumber { get; set; }
  /// summary>
  /// main license, integrated business license
  /// </summary>
  public string MainLicence { get; set; }
  /// summary>
  /// json, other licenses, such as production licenses
  /// </summary>
  public string OtherLicence { get; set; }
  /// summary>
  /// Date d'entrée
  /// </summary>
  [Required(ErrorMessage = "La date d'entrée ne peut pas être vide")]
  public DateTime EnterDate { get; set; }
  /// summary>
  /// Date de départ
  /// </summary>
  [Required(ErrorMessage = "La date limite ne peut pas être vide")]
  public DateTime QuitDate { get; set; }
  /// summary>
  /// Solde de retrait du fabricant
  /// </summary>
  public decimal Balance { get; set; }
}

Les propriétés de l'entité ont des règles de validation sous forme d'Attribute, lorsque l'utilisateur soumet un Model à l'Action backend, le cadre MVC le valide automatiquement, donc le développement backend est très content. Cependant, avant la soumission des données, le frontend doit également effectuer une première validation, si vous utilisez jquery.validate, alors il faut écrire à nouveau des règles similaires dans le js ou les balises, est-ce possible de réutiliser le code existant du backend ? Prenez l'attribut EnterpriseNo comme exemple, dans le cshtml :

@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "Champ obligatoire", @class = "form-control" })

L'HTML généré finalement est le suivant :

beaucoup de data ont été ajoutées automatiquement dans l'étiquette-les propriétés commençant par data-val représente le contrôle nécessitant une validation, d'autres data-Le début est une série de règles de validation et des informations d'erreur en cas d'échec, les informations d'erreur peuvent être personnalisées, sinon le cadre vous générera des chaînes telles que "Le champ EnterpriseNo doit être de longueur maximale de"30 d'un type de chaîne ou d'un tableau.

Maintenant, parlons de la manière dont ces fichiers js peuvent être utilisés ensemble.

La nouvelle version de jquery.validate prend en charge le mode AMD, donc elle peut être chargée directement avec requirejs, tandis que jquery.validate.unobtrusive ne peut pas et nécessite une configuration shim, le code est le suivant :


      baseUrl: '/scripts',
      paths: {
        "jquery": 'jquery-2.2.3.min',
        "knockout":'knockout-3.4.0',
        "bootstrap":'../components/bootstrap/3.3.6/js/bootstrap.min','validate':'jquery.validate',
        'validateunobtrusive':'jquery.validate.unobtrusive.min'
      },
      shim : {
        'bootstrap' : {
          deps : [ 'jquery' ],
          exports : 'bootstrap'
        },
        'validateunobtrusive':{
          deps:['validate'],
          exports: 'validateunobtrusive'
        }
      }
    });

Après la configuration, lorsque vous cliquez sur le bouton submit pour soumettre le formulaire dans la page, les fichiers js commencent à fonctionner. Mais en plus de la mise au point sur le premier contrôle de validation raté, il semble qu'il n'y ait pas d'autres effets, même les informations d'erreur par défaut de jquery.validate après le contrôle (la fonction errorPlacement) ne sont pas visibles, êtes-vous sérieux ? En réalité, c'est parce que jquery.validate.unobtrusive couvre la configuration errorPlacement (regardez la fonction attachValidation dans le code source), ce qui nous économise une étape. Comme le balisage html du tooltip est généré dynamiquement par bootstrap, errorPlacement n'est pas adapté à notre usage. Selon le lien au début de cet article, nous choisissons de surcharger la fonction showErrors, le code principal est comme suit (tooltipvalidator.js) :

define(['validateunobtrusive'], function () {}}
  function TooltipValidator() {}
  TooltipValidator.prototype = {
    init: function (validatorOptions, tooltipOptions) {
      tooltipOptions = tooltipOptions || {};
      validatorOptions = validatorOptions || {};
      this._tooltipOptions = $.extend({}, {
        placement: 'top'
      }, tooltipOptions, { animation: false });
      this._validatorOptions = $.extend({}, {
        //errorPlacement: function (error, element) {
        //  // ne rien faire
        //},
        showErrors: function (errorMap, errorList) {
          for (var i = 0; i < this.successList.length; i++) {}}
            var success = this.successList[i];
            $(this.successList[i]).tooltip('destroy');
            $(this.successList[i]).parents('div.form-group').removeClass('has-error');
          }
          for (var i = 0; i < errorList.length; i++) {}}
            var errorElement = $(errorList[i].element);
            errorElement.parents('div.form-group').addClass('has-error');
            errorElement.attr('data-original-title', errorList[i].message).tooltip('show');
          }
        },
        submitHandler: function (form) {
          return false;
        }
      }, validatorOptions)
      this._configTooltip();
      this._configValidator();
    },
    _configTooltip: function () {
      $('[data-val="true"]').tooltip(this._tooltipOptions);
    },
    _configValidator: function () {
      $.validator.setDefaults(this._validatorOptions);
      $.validator.unobtrusive.parse(document);
    }
  }
  return new TooltipValidator();
});

De cette manière, nous pouvons exécuter tooltipvalidator.init dans la fonction de rappel require, sans avoir à écrire de logique supplémentaire, et les développeurs front-end sont également heureux. Il y a également une chose à noter, voyez la ligne49Lignes de code, voici les étapes d'initialisation de jquery.validate.unobtrusive. Dans le code de jquery.validate.unobtrusive, il y a déjà $(function () { $jQval.unobtrusive.parse(document); }); Cependant, $.ready s'exécute après que les éléments Dom soient chargés (à noter : ce n'est pas après la rendu), donc il s'exécute avant que tooltipvalidator ait la possibilité de configurer le validateur, ce qui rend nos options de configuration inefficaces (si vous êtes dans une application de page unique sans rechargement, vous remarquerez que les options de configuration sont valides lors du rechargement des pages locales, car $.ready ne s'exécute qu'au premier chargement, tandis que les rappels de require s'exécutent à chaque chargement). Il y a deux solutions possibles :1Faire dépendre jquery.validate.unobtrusive de tooltipvalidator;2Retirer $jQval.unobtrusive.parse(document); ici, choisir le2Espèce.

Merci de votre lecture, j'espère que cela peut aider tout le monde, merci pour le soutien de ce site !

Déclaration : Le contenu de cet article est issu du réseau, les droits d'auteur appartiennent aux auteurs respectifs, le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site Web ne détient pas de droits de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu susceptible de violer les droits d'auteur, veuillez envoyer un e-mail à : notice#w3Déclaration : Le contenu de cet article est issu du réseau, les droits d'auteur appartiennent aux auteurs respectifs, le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site Web ne détient pas de droits de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu susceptible de violer les droits d'auteur, veuillez envoyer un e-mail à : notice#w

Tutoriel de base