5

Non ho usato datepicker di jquery.ui perché avevo bisogno di selezionare un'intera settimana e più date in condizioni diverse, quindi sto usando Keith Wood's datepicker in un EditorTemplate per i miei campi Data:Validazione discreta per Datepicker inline non funziona, funziona bene per Datepicker non in linea

@model Nullable<DateTime> 
    @{ 
     string name = ViewData.TemplateInfo.HtmlFieldPrefix; 
     string id = name.Replace(".", "_"); 
     string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty; 
    }   
    @Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id }) 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#@id').datepick({ 
       renderer: $.datepick.themeRollerRenderer, 
       multiSelect: 999 
      }); 
     });  
    </script> 

convalida funziona bene quando si utilizza una casella di testo e avere la datePicker "pop-up"; ma quello che voglio veramente è quello di utilizzare un datepicker in linea, ma non riesco a ottenere la convalida di lavorare in queste condizioni:

@model Nullable<DateTime> 
    @{ 
     string name = ViewData.TemplateInfo.HtmlFieldPrefix; 
     string id = name.Replace(".", "_"); 
     string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty; 
    } 

    <div class="kwdp"> 
    </div> 
    @Html.Hidden("", dt, new { @class = "datefield", @id = id }) 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.kwdp').datepick({ 
       renderer: $.datepick.themeRollerRenderer, 
       multiSelect: 999 
      }); 
     });  
    </script> 

Qui è un elemento di cattura-it della mia abitudine validazione lato client:

form.validate({ 
     rules:{ 
      StartDate: { 
       required: true, 
       dpDate: true 
      } 
     }, 
     messages: { 
      StartDate: 'Please enter a valid date (dd-mm-yyyy)' 
     } 
    }); 

E qui è la definizione del campo DateTime nella mia classe di dati:

[Required] 
    [DataType(DataType.Date)] 
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")] 
    public Nullable<DateTime> StartDate { get; set; } 

ho capito che avrei dovuto aggiungere un onSelect per il datePicker per popolare il campo nascosto con la data (s), ma a prescindere , Dovrei ricevere un errore quando il valore del campo nascosto è vuoto, ma non è valido. Il markup HTML è resa come il seguente:

<input name="StartDate" class="datefield" id="StartDate" type="hidden" data-val-required="The StartDate field is required." data-val="true" data-val-date="The field StartDate must be a date." value=""/> 

Sto usando le seguenti librerie:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.ext.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.validation.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.validation.min.js")" type="text/javascript"></script> 

ho trovato a similar un-answered question che guarda lo sviluppatore sta avendo lo stesso problema, ma nessuna soluzione distaccati. Qualche idea su dove sto andando male?

risposta

7

Jason ha ragione. Per impostazione predefinita, la validazione jquery ignora/ignora gli elementi di input non visibili. Questo vale per gli elementi input type="hidden" o anche per le caselle di testo che hanno/ereditano il codice display:none; CSS. C'è un'impostazione chiamata ignore, e il suo valore di default è simile al seguente:

ignore: ':hidden' 

È possibile ignorare questa impostazione sulla tua pagina con il seguente script:

$.validator.setDefaults({ 
    ignore: '' 
}); 

Questo dice jquery validate non ignorare la convalida per elementi non visibili. Se si utilizza questo script, la convalida di jQuery dovrebbe automaticamente convalidare il campo in modo discreto senza che sia necessario convalidare manualmente ogni volta che il valore del campo Datepicker viene modificato.

+0

L'ha fatto!Funziona sia per Html.Hidden (...) che per Html.TextBox (... style = "display: none"). Nota: ho dovuto caricarlo all'inizio del ciclo di vita della pagina, non potevo semplicemente impostareDefaults() in una funzione chiamata quando si compilava dinamicamente un modulo con elementi. Grazie per l'aiuto. R/Brandon – m4chine

+0

Sì, hai ragione, l'impostazione predefinita di override non sembra avere effetto se la inserisci in una funzione anonima autoeseguita. – danludwig

0

In MVC3 i campi dei moduli nascosti non sono convalidati dallo script di convalida del client, da quello che ho capito. Perché non basta rendere il campo di testo nascosto, se questo è tutto ciò che vuoi fare?

@Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id, style="display:none;" }) 

o se si desidera mantenere come un @ Html.Hidden campo si dovrà chiamare manualmente il plugin validate sul modulo ogni volta che il DatePicker è cambiato.

$("form").validate().form(); 
+0

Sembra che non solo non siano convalidati quando type = "hidden" ma e quando display: nessuno così come non è stato valutato neanche. – m4chine

+0

Inizialmente ho provato questo in mvc3 prima di migrare il mvc4 nella speranza che avrebbe risolto il problema, ma non lo ha fatto, da qui il titolo. Ma la correzione che hai postato è stata testata solo in mvc4, ho visto altrove il display: nessuno avrebbe dovuto risolverlo in mvc3, proverò a migrare di nuovo a mvc3 per testare la tua correzione. – m4chine

Problemi correlati