Unobtrusive Validation

Bài viết này sẽ hướng dẫn bạn hiển thị các cột nào cần có giá trị và những cột nào theo định dạng của nó

ss01

Code ban đầu:

<form class="form-horizontal" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
< input type="text" class="input-medium" id="name" name="name" ></div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" class="input-medium" id="email" name="email"></div>
</div>
<div class="control-group">
<label class="control-label" for="website">Website</label>
<div class="controls">
<input type="text" class="input-medium" id="website" name="website" ></div>
</div>
<div class="control-group">
<label class="control-label" for="comment">Message</label>
<div class="controls">
<textarea class="input-medium" id="comment" rows="3" name="comment" ></textarea>
"comment" data-valmsg-replace="true"></span></div>
</div>
<div class="form-actions">
<button type="submit" class="btn">Send</button>
@if (ViewBag.MailSent != null && ViewBag.MailSent)
{
<div>Mail Sent!</div>
}</div></fieldset>
</form>

Để đánh đấu thuộc tính quan trọng tôi thêm 2 thuộc


data-val="true" data-val-required="*"

 

Kết quả:

</pre>
<input type="text" class="input-medium" id="name" name="name" data-val="true" data-val-required="*">
<pre>

Nhưng để hiển thị thông báo ta phải thêm đằng sau ô nhập một đoạn code html như sau

</pre>
<input type="text" class="input-medium" id="name" name="name" data-val="true" data-val-required="*">
<span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span>
<pre>

Nếu bạn muôn quy định định dạng cụ thể thuộc tính là Email bạn có thể ghi thêm thuộc tính cho input


data-val-email="Not Valid"

Tương tự đối với các ô nhập khác. Kết quả thu được sẽ như hình đầu tiên.

 

 

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s