I'm trying out the jQuery Validation plugin
jQuery Docs
Here is the markup of my form:
<% using (Html.BeginForm("action", "contoller", null, FormMethod.Post, new { id = "sxform" })){%>
<div id="manifest">
Manifest Option:<br />
<%= Html.DropDownList("docid", ViewData["manifests"] as SelectList, new { #class = "required" })%>
</div>
<div id="release">
Release Version:<br />
<%= Html.TextBox("release", null, new { #class = "required" })%>
</div>
<div id="locale">
Localization:<br />
<%= Html.DropDownList("localization", ViewData["localizations"] as SelectList, new { #class = "required" })%>
</div>
<div id="label">
Label:<br />
<%= Html.TextBox("label", null, new { #class = "required" })%>
</div>
<div id="session">
Session ID (optional):<br />
<%= Html.TextBox("sessionInput", null, new { #class = "required" })%>
</div>
<div id="submit"><input type="submit" value="Build" /></div>
<% } %>
JS:
$(document).ready(function(){
$("#sxform").validate();
});
I am using MS MVC HTML Helpers to render this form. The resulting markup looks fine. IE each input and selection element contains the attribute 'class' with the value 'required'.
When I submit this form the validation does noting. Can someone familiar with this library help? It looks pretty widely used.
Thanks!
You code looks fine and should work. Make sure you have included the plugin:
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
Also look for possible javascript errors in the FireBug console.
Related
I am using .net MVC. This is my razor view of create a Bill which have a property Due Date. I want to use date picker in my code but it's not working when i use following code:
<div class="form-group">
#Html.LabelFor(model => model.DueDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.DueDate, new { id = "datepicker" })
#Html.ValidationMessageFor(model => model.DueDate)
</div>
</div>
<script type="text/javascript">
$(document).ready(function () { $("#datepicker").datepicker({ });});
</script>
So I changed the code to following then it started working but how can I pass the duedate value to controller the above code automatically attaches the due date value to object but the below code can't.
<div class="form-group">
#Html.LabelFor(model => model.DueDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input type="date" id="datepicker" class="form-control"/> //Changing
#Html.ValidationMessageFor(model => model.DueDate)
</div>
</div>
<script type="text/javascript">
$(document).ready(function () { $("#datepicker").datepicker({ });});
</script>
The code in your first snippet uses a date time picker control provided by jQuery UI library.To make it work you need to add a reference to the following files in this order:
jQuery.js
jQueryUI.js
jQueryUI.css
So your final code should look something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker();
});
</script>
The code in your second snippet uses an HTML 5 input of type date, as was pointed out by Stephen.This automaticallly makes the input a date time picker if it's supported by the browser.
The reason the second snippet wasn't working is that the binding in MVC happens on the name property.Since your C# property is called DueDate you need to add name="DueDate" to the input element.
Change this line:
<input type="date" id="datepicker" class="form-control"/>
To this:
<input name="DueDate" type="date" id="datepicker" class="form-control"/>
I created an Edit page in MVC and decided I did not want the ID to be editable, but I do want it to look like the rest, just greyed out preferably.
Here is my property:
<div class="form-group">
#Html.LabelFor(model => model.EvpId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
</div>
After doing some reading everyone seems to suggest using the #Html.DisplayFor which makes sense, even though it does not look like the rest.
However when swapping the EditorFor for the DisplayFor I notice that the label is not on the same line:
What is the simple way of having this on the same line as the corresponding label, I am using the standard out of the box bootstrap CSS.
View Source on page:
<div class="form-group">
<label class="control-label col-md-2" for="EvpId">Id</label>
<div class="col-md-10">
2
<span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
</div>
</div>
I have had the same issue.
Jasen answer did not help, because span does not put an element into the same horizontal line with label, but his later comment with the link to bootstrap doc solved the problem, we should use p tag instead of span.
So my final solution was:
<p class="form-control-static">#Html.DisplayFor(model => model.Contractor.Name) </p>
Thanks to Jasen!
When you use #Html.DisplayFor() the helper is selecting markup based on the type. Here it chose to output a bare string and this breaks the Bootstrap form-horizontal styling.
<div class="col-md-10">
2 <!-- no surrounding tags for EvpId value -->
...
</div>
The easiest thing to do is just use plain html to insert your own tags
<div class="col-md-10">
<span class="form-control-static">#Model.EvpId</span>
...
</div>
If you do this a lot or you have much more markup you can create a custom helper extension. This is a very simple example:
public static class HtmlHelperExtensions
{
public static HtmlString IdSpan(this HtmlHelper helper, string id)
{
return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
}
}
Usage:
<div class="col-md-10">
#Html.Idspan(Model.EvpId)
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
Using Jasen's answer I was able to achieve what I wanted by altering the width of the <span> however this seemed abit messy:
<span class="form-control" style="width:280px;">#Model.EvpId</span>
The ultimate answer to my question was this as it is what I originally was looking for:
#Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
Hope this helps someone.
Instead of wrapping in a P tag or SPAN I just put the class directly into the exiting DIV, and that worked too.
<div class="col-md-10 form-control-static">
...
</div>
Problem Statement:
In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0
Any help would be appreciated. What inline CSS I should use to align properly??
Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned.
Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.
View:
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.AcquirestatusID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.AcquirestatusID,new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AcquirestatusID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
I solved my problem using readonly attribute to my Textboxfor.
#Html.TextBoxFor(model => model.AccessoriesID,new { #class = "form-control",#readonly="readonly" })
After applying above line of code my edit view looks:
It might be happening due to the style.css which is by default in your project.
Remove style.css from the project
Note: you might only need some of the validation classes inside it
I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.
If you want to line up the text and not use a textbox, use the class "form-control-static"
<div class="col-md-10 form-control-static">#Html.DisplayTextFor(model => model.AcquirestatusID)</div>
I created a form in asp.net and now I need to add a validation to it, so if any of the fields has been populated and user will try to leave the page, the pop-up will appear asking "Do you want to exit without saving?". Is there a simple way I can to this?
<% using (Html.BeginForm("Create", "Damages", FormMethod.Post))
{%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%=Html.LabelFor(model => model.OrderId)%>
</div>
<div class="editor-field">
<%= Model.OrderId%>
</div>
....
<%=Html.HiddenFor(model => model.Id)%>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
You can use the onbeforeunload event:
<script>
window.onbeforeunload = function() {
if( isDirty ) {
return 'Do you want to exit without saving?';
}
}
</script>
Of course you need to keep track of form field changes and set the isDirty flag accordingly.
https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
http://msdn.microsoft.com/en-us/library/ie/ms536907%28v=vs.85%29.aspx
When I use
#{Html.RenderPartial("Login");}
inside my main view, the #Html.ValidationSummary() doesn't work, but when I copy the code from "Login" inside main view, it works.
Why is that, and how do I display validation messages from the partial view?
Here is partial view "Login":
#model NyNo.Models.LoginModel
#using (Html.BeginForm())
{
<fieldset>
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#Html.TextBoxFor(m => m.UserName, new { #placeholder = "Username" })
#Html.ValidationMessageFor(m => m.UserName)
#Html.PasswordFor(m => m.Password, new { #placeholder = "Password" })
#Html.ValidationMessageFor(m => m.Password)
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new { #class = "checkbox" })
<input type="submit" class="button" value="Log in" />
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Hope you understand, thanks!
Unfortunately, this cannot work. A Partial is just a string.
While RenderPartial actually 'writes' the partial markup rather than sending a string back to the View Generator, it does not rebind your View to a new model. If you want Validation Summary to work it must be bound to a model in your main View.
Your problem could be related to this (maybe you aren't showing the ViewData passed in the RenderPartial()): Pass Additional ViewData to an ASP.NET MVC 4 Partial View While Propagating ModelState Errors
I was having a similar issue and I solved it this way: ValidationSummary inside a partial view not showing errors