Análisis del problema de la implementación de tooltip de error con jquery.validate[.unobtrusive] y Bootstrap

Artículos similares ya existen, consulte aquí, siento que es un poco complejo, también estoy planeando escribir uno simple para el proyecto, algunos puntos clave se graban aquí. El efecto final es el siguiente:

backend utiliza Asp.net mvc5Los marcos de trabajo delante incluyen: jQuery.validate, jQuery.validate.unobtrusive, requirejs, Bootstrap, todos los más/No hace falta decir que la versión más reciente. jQuery.validate es un componente de validación delante más popular; jQuery.validate.unobtrusive se basa en jQuery.validate, diseñado para complementar Asp.net mvc, escrito por Microsoft, se puede encontrar en NuGet como Microsoft.jQuery.Unobtrusive.Validation. Cómo usarlo, siga leyendo.

Primero definimos la clase de entidad en el backend:

/// summary>
/// Información de fabricante
/// </summary>
public class Manufacturer : OperatedModel
{
  [Key]
  [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  public int ID { get; set; }
  /// summary>
  /// Código de crédito/Número de registro}}
  /// </summary>
  [Required(ErrorMessage = "Código de crédito")]/Número de registro no puede estar vacío")]
  [MaxLength(30)]
  public string EnterpriseNo { get; set; }
  /// summary>
  /// Nombre de la empresa
  /// </summary>
  [Required(ErrorMessage = "Nombre de la empresa no puede estar vacío")]
  public string EnterpriseName { get; set; }
  /// summary>
  /// Dirección de registro
  /// </summary>
  [Required(ErrorMessage = "Dirección de registro no puede estar vacía")]
  public string RegisteredAddress { get; set; }
  /// summary>
  /// representante legal
  /// </summary>
  [Required(ErrorMessage = "No puede estar vacío")]
  public string ArtificialPerson { get; set; }
  /// summary>
  /// persona responsable responsable
  /// </summary>
  [Required(ErrorMessage = "Responsable no puede estar vacío")]
  public string PIC { get; set; }
  [Required(ErrorMessage = "Número de teléfono no puede estar vacío")]
  [RegularExpression(RegexLib.Mobile, ErrorMessage = "Número de teléfono incorrecto")]
  public string Mobile { get; set; }
  [EmailAddress]
  public string Email { get; set; }
  /// summary>
  /// Número de tienda
  /// </summary>
  public string ShopNumber { get; set; }
  /// summary>
  /// Nombre del administrador de la tienda
  /// </summary>
  public string StoreManagerName { get; set; }
  /// summary>
  /// Contacto del administrador de la tienda
  /// </summary>
  [RegularExpression(RegexLib.Mobile, ErrorMessage="Número de teléfono incorrecto")]
  public string StoreManagerNumber { get; set; }
  /// summary>
  /// licencia principal, certificado de registro de unificación de tres certificados
  /// </summary>
  public string MainLicence { get; set; }
  /// summary>
  /// json, otros licencias, como licencia de producción
  /// </summary>
  public string OtherLicence { get; set; }
  /// summary>
  /// Fecha de entrada
  /// </summary>
  [Required(ErrorMessage = "La fecha de entrada no puede estar vacía")]
  public DateTime EnterDate { get; set; }
  /// summary>
  /// Fecha de salida
  /// </summary>
  [Required(ErrorMessage = "La fecha de vencimiento no puede estar vacía")]
  public DateTime QuitDate { get; set; }
  /// summary>
  /// Saldo disponible para el fabricante
  /// </summary>
  public decimal Balance { get; set; }
}

Cada propiedad de la entidad tiene reglas de validación en forma de Attribute, cuando el usuario envía un Model a la acción del back-end, el framework MVC lo ayudará a completar automáticamente la validación, por lo que el desarrollo del back-end está muy contento. Sin embargo, también es necesario realizar una validación en la primera ronda en el front-end antes de enviar los datos, si se utiliza jquery.validate, entonces es necesario escribir de nuevo reglas similares en js o etiquetas, ¿podemos reutilizar el código del back-end existente? Tomemos el atributo EnterpriseNo como ejemplo y escribimos en cshtml:

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

El html generado finalmente es el siguiente:

las etiquetas también tienen muchas propiedades data añadidas automáticamente-propiedades que comienzan con data-val indica que el control necesita validación, otros data-El inicio es una serie de reglas de validación y mensajes de error en caso de fallo, los mensajes de error se pueden personalizar, de lo contrario, el framework generará algo como "El campo EnterpriseNo debe tener una longitud máxima de"30 debe ser de tipo cadena o array.

Ahora hablemos de cómo se utilizan estos js juntos.

La nueva versión de jquery.validate ya admite el modo AMD, por lo que se puede cargar directamente con requirejs, mientras que jquery.validate.unobtrusive no, y se requiere una configuración de shim, el código es el siguiente:


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

Después de la configuración, en la página require, en este momento haga clic en el botón submit para enviar el formulario, y los js comenzarán a actuar. Pero además de que el foco se coloque en el primer control que falla en la verificación, parece que no hay otros efectos, incluso la función de errorPlacement predeterminada de jquery.validate de mostrar información de error detrás del control (función errorPlacement) también desapareció, ¿estás bromeando? En realidad, esto se debe a que jquery.validate.unobtrusive cubre la configuración de errorPlacement (ver la función attachValidation en el código fuente), lo que para nosotros significa ahorrarnos un paso. Dado que el marcado html del tooltip se genera dinámicamente por bootstrap, la función errorPlacement no es adecuada para nosotros, consulte el enlace al principio de este artículo, elija sobrescribir la función showErrors, el código nuclear es el siguiente (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) {
        //  // no hacer nada
        //},
        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 esta manera, podemos ejecutar tooltipvalidator.init en la función de callback de require, sin necesidad de escribir lógica adicional, y los colegas de frontend también están felices. Aquí hay algo más que需要注意，大家看到第49Ejemplo de código, estos son los pasos para inicializar jquery.validate.unobtrusive. Originalmente, jquery.validate.unobtrusive ya tiene $(function () { $jQval.unobtrusive.parse(document); }); sin embargo, $.ready se ejecuta después de que los elementos del DOM se hayan cargado (nota al margen: no se ha renderizado), por lo que se ejecuta antes de que tooltipvalidator tenga la oportunidad de _configValidator, lo que hace que nuestras opciones de configuración sean inválidas (si es en una aplicación de una página sin recarga, se encontrará que las opciones de configuración son válidas cuando se carga una página local nuevamente, porque $.ready se ejecuta solo en la carga inicial, mientras que los callbacks de require se ejecutan cada vez que se carga). Hay dos soluciones posibles:1Hacer que jquery.validate.unobtrusive dependa de tooltipvalidator;2Quitar $jQval.unobtrusive.parse(document); aquí se elige el2especie.

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a este sitio!

Declaración: Este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, el copyright pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará también