Cách tiếp cận tốt nhất để mở rộng javascript không phô trương trong MVC3 để thêm kiểu vào một mặt khách hàng div

Question

Tôi đang sử dụng html5/Razor/MVC3 tận dụng mẫu Bootstrap từ Twitter. Tôi muốn có hình thức xác nhận có vẻ trơn tru như họ đã tài liệu (http://twitter.github.com/bootstrap/#forms). Vì vậy, nếu chúng ta hãy nhìn vào cách MVC3 nồi hơi-tấm tiêu chuẩn cho đăng ký tài khoản, đánh dấu sẽ trông như thế:

@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> 

Những gì tôi muốn làm là có div container tiêm lớp "lỗi" như tôi đã được mã hóa cứng trong đầu vào đầu tiên. (Vì vậy, khi vào trang, div sẽ có một lớp "clearfix" nhưng nếu khối đầu vào đó không xác nhận được, nó sẽ gắn thẻ nó là "clearfix error"). Tôi hình tôi sẽ phải cập nhật khối div để bao gồm một id của một số loại và có lẽ thêm một thuộc tính data- mới vào ValidationMessage. Tôi không gặp sự cố khi mở rộng trình trợ giúp ValidationMessageFor. Tôi chỉ không chắc chắn 100% là cách tiếp cận nào để mở rộng thư viện ở đó. Bất kỳ đề xuất về cách tiếp cận này?

TIA.

CẬP NHẬT:

Tôi đang nghĩ đến phương pháp này là hợp lý:

<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> 

Bằng cách trang trí nhắn xác nhận của tôi với một tên dữ liệu-container, sau đó tôi có thể nhắm mục tiêu div container. Bây giờ tôi chỉ cần tìm ra cách đánh chặn thông báo xác thực.

Answer 1

Thay vì phát minh lại bánh xe cụ thể này, hãy kiểm tra trình xác thựcPhụ lục chung có sẵn tại http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/.

Bạn có thể tùy chỉnh các yếu tố popup như bạn muốn, và nó là tầm thường để kết nối với jQuery.validate.js.

Answer 2

Đến cùng một vấn đề. Tôi đang giải quyết nó bằng cách thêm và extesion vào lớp HtmlHelper.

Đây là những gì tôi đã làm cho 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)); 

     } 
    } 

Và trong file .cshtml tôi thay Html.ValidationSummary với điều này:

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

Hãy nhớ thêm các namespance của lớp mở rộng của bạn trong tệp web.config thư mục lượt xem.

Tôi sẽ đăng ở đây sau nếu tôi xử lý mục nhập riêng lẻ trước bạn. HTH

Answer 3

Phương thức $.validator.setDefaults đã giải quyết vấn đề này cho tôi bằng Bootstrap từ Twitter. Tôi đang sử dụng jquery.validate.js và jquery.validate.unobtrusive.js.

Do xác nhận không phô trương trên DOM sẵn sàng quét tài liệu của bạn và lưu trữ các tùy chọn xác thực không phô trương cho mỗi biểu mẫu mà nó gặp phải, cần gọi phương thức $.validator.setDefaults trước khi quét tài liệu.

// 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

Tôi đã thực hiện các lớp css để xác thực lỗi và tạo tệp css mới có cùng lớp nhưng với giá trị bootstrap.

Bạn có thể tìm thấy nó trong một gói NuGet tại địa chỉ: http://nuget.org/List/Packages/MahApps.Twitter.Bootstrap

Đó cũng cung cấp một số mẫu giàn giáo để autocreate quan điểm mới.

Answer 5

Tôi đặt trước để thay đổi CSS của bootstrap. Chỉ cần thêm các lớp jQuery xác thực ở đúng nơi. trường xác nhận lỗi và đầu vào-xác nhận lỗi

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

Bạn có thể tích hợp xác nhận MVC3 với khuôn khổ Bootstrap bằng cách thêm javascript sau vào trang của bạn (Xem)

<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> 

Bên cạnh đó, trên Views (ví dụ "Create.cshtml") đảm bảo rằng các trường trong biểu mẫu được định dạng như sau ...

<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> 

Với giải pháp này, rất có thể là đủ để chỉ cần thêm một javascript mà không cần chỉnh sửa Chế độ xem.

Answer 7

Tôi cần giải quyết vấn đề này bằng Bootstrap 3.1 và Razor. Đây là những gì tôi đã sử dụng:

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

Đây là sự kết hợp của câu trả lời của Đức và giúp đỡ từ điều này "theBraindonor". Đã cập nhật để sử dụng các lớp Bootstrap 3 mới.