Miglior approccio per estendere il javascript discreto in MVC3 per aggiungere uno stile a un lato client div

Question

Sto utilizzando html5/Razor/MVC3 sfruttando il modello Bootstrap da Twitter. Voglio avere la convalida del modulo che sembra chiazza di petrolio come hanno documentato (http://twitter.github.com/bootstrap/#forms). Quindi, se diamo uno sguardo a come il MVC3 caldaia-piastra standard per la registrazione dell'account, il markup sarà simile:

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class="form-stacked" })) { 
    @Html.ValidationSummary(true, "Snap! Something went wrong") 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 
      <div class="clearfix error"> 
       @Html.LabelFor(m => m.UserName) 
       <div class="input"> 
        @Html.TextBoxFor(m => m.UserName) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.Email) 
       <div class="input"> 
        @Html.TextBoxFor(m => m.Email) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.Password) 
       <div class="input"> 
        @Html.PasswordFor(m => m.Password) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span> 
       </div> 
      </div> 

      <div class="clearfix"> 
       @Html.LabelFor(m => m.ConfirmPassword) 
       <div class="input"> 
        @Html.PasswordFor(m => m.ConfirmPassword) 
        <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span> 
       </div> 
      </div> 
     </fieldset> 
     <div class="actions"> 
      <button class="btn large primary" type="submit">Register</button> 
     </div> 
    </div> 

Quello che voglio fare è avere il div contenitore di iniettare la classe "errore" come I' ve hard-coded nel primo input. (Quindi, dopo aver inserito la pagina, il div avrebbe avuto una classe di "clearfix", ma se quel blocco di input avesse fallito la convalida, lo avrebbe etichettato come "clearfix error"). Immagino che dovrò aggiornare il blocco div per includere un id di qualche tipo e magari aggiungere un nuovo attributo data al ValidationMessage. Non ho problemi ad estendere l'helper ValidationMessageFor. Non sono sicuro al 100% quale dovrebbe essere l'approccio per estendere la libreria che è lì. Qualche suggerimento su come affrontarlo?

TIA.

UPDATE:

Sto pensando che questo approccio è ragionevole:

<div id="UserNameContainer" class="clearfix error"> 
    @Html.LabelFor(m => m.UserName) 
    <div class="input"> 
     @Html.TextBoxFor(m => m.UserName) 
     <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName, null, new { @data_container = "UserNameContainer" })</span> 
    </div> 
</div> 

decorando il mio messaggio di convalida con un nome di dati-contenitore, ho potuto quindi indirizzare il div contenitore. Ora ho solo bisogno di capire come intercettare il messaggio di convalida.

Answer 1

Anziché reinventare questa particolare rotella, controllare il plug-in validationEngine disponibile a http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/.

È possibile personalizzare gli elementi popup come desiderato ed è banale connettersi a jQuery.validate.js.

Answer 2

È venuto attraverso lo stesso problema. Lo affronterò aggiungendo ed estendendo alla classe HtmlHelper.

Questo è quello che ho fatto per il ValidationSummary:

public static class TwitterBootstrapHelperExtensions 
    { 
     public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper, 
           bool excludePropertyErrors, 
           string message) 
     { 
      if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty); 

      string errorsList = "<ul>"; 
      foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0)) 
      { 
       errorsList += string.Format("<li>{0}</li>", error.Errors.First().ErrorMessage); 
      } 
      errorsList += "</ul>"; 
      return new MvcHtmlString(string.Format("<div class=\"alert-message error\"><span>{0}</span>{1}</div>",message,errorsList)); 

     } 
    } 

E nel file .cshtml sostituisco Html.ValidationSummary con questo:

@Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.") 

ricordare di aggiungere la namespance della classe estensione nel file web.config della cartella views.

Inserirò qui più tardi se affronterò l'elemento di input individuale prima di te. HTH

Answer 3

Il metodo $.validator.setDefaults ha risolto questo problema per me con Bootstrap da Twitter. Sto usando jquery.validate.js e jquery.validate.unobtrusive.js.

Poiché la convalida discreta su DOM ready esegue la scansione del documento e memorizza le opzioni di convalida non invasive per ogni modulo rilevato, è necessario chiamare il metodo $.validator.setDefaults prima che si verifichi la scansione del documento.

// setup defaults for $.validator outside domReady handler 
$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).closest(".clearfix").addClass("error"); 
    }, 
    unhighlight: function (element) { 
     $(element).closest(".clearfix").removeClass("error"); 
    } 
}); 

$(document).ready(function() { 
     // do other stuff 
}); 

Answer 4

Quello che ho fatto è preso le classi CSS per gli errori di validazione e creato un nuovo file CSS con le stesse classi, ma con valori di bootstrap.

Lo si può trovare in un pacchetto NuGet a: http://nuget.org/List/Packages/MahApps.Twitter.Bootstrap

che fornisce anche alcuni modelli di ponteggi per autocreate nuovi punti di vista.

Answer 5

Preferisco cambiare il CSS di bootstrap. Appena aggiunto le classi di jQuery validate nel posto giusto. di convalida sul campo errori e input-validazione errori

form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error { 
    color: #b94a48; 
} 
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error { 
    color: #b94a48; 
    border-color: #ee5f5b; 
} 
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus { 
    border-color: #e9322d; 
    -webkit-box-shadow: 0 0 6px #f8b9b7; 
    -moz-box-shadow: 0 0 6px #f8b9b7; 
    box-shadow: 0 0 6px #f8b9b7; 
} 

Answer 6

È possibile integrare la convalida MVC3 con quadro Bootstrap aggiungendo il seguente javascript per la pagina (Vedi)

<script> 
$(document).ready(function() { 
/* Bootstrap Fix */ 
$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).closest("div.control-group").addClass("error"); 
    }, 
    unhighlight: function (element) { 
     $(element).closest("div.control-group").removeClass("error"); 
    } 
}); 
var current_div; 
$(".editor-label, .editor-field").each(function() { 
    var $this = $(this); 
    if ($this.hasClass("editor-label")) { 
     current_div = $('<div class="control-group"></div>').insertBefore(this); 
    } 
    current_div.append(this); 
}); 
$(".editor-label").each(function() { 
    $(this).contents().unwrap(); 
}); 
$(".editor-field").each(function() { 
    $(this).addClass("controls"); 
    $(this).removeClass("editor-field"); 
}); 
$("label").each(function() { 
    $(this).addClass("control-label"); 
}); 
$("span.field-validation-valid, span.field-validation-error").each(function() { 
    $(this).addClass("help-inline"); 
}); 
$("form").each(function() { 
    $(this).addClass("form-horizontal"); 
    $(this).find("div.control-group").each(function() { 
     if ($(this).find("span.field-validation-error").length > 0) { 
      $(this).addClass("error"); 
     } 
    }); 
}); 
}); 
</script> 

Inoltre, sul punto di vista (ad esempio "Create.cshtml") fare in modo che i campi del modulo sono formattati come la seguente ...

<div class="editor-label"> 
     @Html.LabelFor(Function(model) model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(Function(model) model.Name) 
     @Html.ValidationMessageFor(Function(model) model.Name) 
    </div> 

Con questa soluzione, sarà molto probabilmente basta aggiungere un javascript senza modificare la vista.

Answer 7

Avevo bisogno di risolvere questo problema utilizzando Bootstrap 3.1 e Razor. Questo è quello che ho usato:

$.validator.setDefaults({ 
    highlight: function (element) { 
     $(element).parents(".form-group").addClass("has-error"); 
    }, 
    unhighlight: function (element) { 
     $(element).parents(".form-group").removeClass("has-error"); 
    } 
}); 

$(function() { 

    $('span.field-validation-valid, span.field-validation-error').each(function() { 
     $(this).addClass('help-block'); 
    }); 

    $('form').submit(function() { 
     if ($(this).valid()) { 
      $(this).find('div.form-group').each(function() { 
       if ($(this).find('span.field-validation-error').length == 0) { 
        $(this).removeClass('has-error'); 
       } 
      }); 
     } 
     else { 
      $(this).find('div.form-group').each(function() { 
       if ($(this).find('span.field-validation-error').length > 0) { 
        $(this).addClass('has-error'); 
       } 
      }); 
     } 
    }); 

    $('form').each(function() { 
     $(this).find('div.form-group').each(function() { 
      if ($(this).find('span.field-validation-error').length > 0) { 
       $(this).addClass('has-error'); 
      } 
     }); 
    }); 
}); 

Questa è una combinazione di @ risposta di tedesco e l'aiuto di questo post da "theBraindonor". Aggiornato per utilizzare nuove classi Bootstrap 3.