I've successfully implemented client side validation to require input in my textbox. However, I want to evaluate the contents of the textbox to see if it is a well formed URL. Here's what I have thus far:
Index.cshtml:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.5.1.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
#model Ticket911.Models.ValidationModel
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
#using (Ajax.BeginForm("Form", new AjaxOptions() { UpdateTargetId = "FormContainer" , OnSuccess = "$.validator.unobtrusive.parse('form');" }))
{
<p>
Error Message: #Html.ValidationMessageFor(m => m.URL)
</p>
<p>
#Html.LabelFor(m =>m.URL):
#Html.EditorFor(m => m.URL)
</p>
<input type="submit" value="Submit" />
ValidationModel:
public class ValidURLAttribute : ValidationAttribute
{
public override bool IsValid(object value)
{
return (value != null);
}
}
public class ValidationModel
{
[Required]
public string URL {get; set;}
}
How do I ensure that the model URL validation occurs? When the Submit button is clicked, what must be done to navigate to the URL entered into the textbox?
Thanks much:)
good way is to implement your attribute for next use in mvc projects. like this:
public class UrlAttribute : RegularExpressionAttribute
{
public UrlAttribute() : base(#"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$")
{}
}
so on the model:
[Url(ErrorMessage = "URL format is wrong!")]
public string BlogAddress { get; set; }
You can do it wtih DataAnnotations
public class ValidationModel
{
[Required]
[RegularExpression(#"^http(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$", ErrorMessage = "URL format is wrong")]
public string URL {get; set;}
}
And in your HTTPPost Action method, You can call the ModelState.IsValid property which will check the Validations for you.
[HttpPost]
public ActionResult Save(ValidationModel model)
{
if(ModelState.IsValid)
{
//Save or whatever
}
return View(model);
}
Related
When I submit my form, The client validation is working, but it is not displaying the error messages for the invalid form fields...
The Model
public class Blog : MainDbContext
{
public int Id { get; set; }
[Display(Name="Author")]
public int Profile { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Title is required.")]
public string Title { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "At least one Tag is required.")]
public string Tags { get; set; }
}
The ViewModel
public class BlogEditViewModel
{
public BlogEditViewModel(Blog blogItem, IEnumerable<SelectListItem> staffList)
{
this.BlogItem = blogItem;
this.StaffList = staffList;
}
public Blog BlogItem { get; set; }
public IEnumerable<SelectListItem> StaffList { get; private set; }
}
The View
<section>
#Html.LabelFor(model => model.BlogItem.Tags)
#Html.EditorFor(model => Model.BlogItem.Tags, null, "Tags")
#Html.ValidationMessageFor(model => model.BlogItem.Tags)
</Section>
The Layout
<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
The Output (on form submitted)
<input type="text" value="ok" name="Tags" id="Tags" data-val-required="At least one Tag is required." data-val="true" class="text-box single-line input-validation-error">
<span data-valmsg-replace="true" data-valmsg-for="BlogItem.Tags" class="field-validation-valid"></span>
What i expect is the above Span tag to contain the error message as defined n the Model.
The problem I suspect relates to the naming in the EditorFor, as you can see I use an overload to specify the 'htmlfieldname', as without this the form data fails to map the form fields with the model & fails to save the submitted from data.
If I dont use the overloaded EditorFor, the validation works, but as mentioned above the, the form data fails to map the form fields with the model
how do I get the validation to work?
Thanks
kb
Add this script in your View and client side validation is working fine,
<script src="#Url.Content("~/Script/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I think issue is you have to remove null, "Tags"
#Html.EditorFor(model => Model.BlogItem.Tags)
or you have to assign null, "Tags" to
#Html.ValidationMessage("Tags")
Ex:
View
#Html.LabelFor(m => m.Name)
#Html.TextBoxFor(m => m.Name, new { Name="asd"})
#Html.ValidationMessage("asd")
Model
public class RegisterModel
{
[Required(ErrorMessage = "Name is required.")]
public string Name { get; set; }
}
When my page loads in "edit" mode, my text fields render correctly, but my numeric fields render with the error validation text visible, even though the value in the field is valid:
My problem is in a more complex project, but I was able to reproduce it in an out-of-the-box MVC 3 application in which I just added these bits. Why does the numeric field display the error text but the text field is fine when the page loads?
What is going on here?
I have the following for my Model, Controller, and View:
Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace MvcIssues.Models
{
public enum Operations
{
View = 0,
Edit = 1
}
public class ShowsModel
{
public Operations Operation { get; set; }
[Display(Name = "Name")]
[DataType(DataType.Text)]
[StringLength(10)]
public string Name { get; set; }
[Display(Name = "Number")]
[Required]
[Range(typeof(int), "1", "999")]
public int Number { get; set; }
}
}
Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcIssues.Models;
using MvcIssues.Data;
namespace MvcIssues.Controllers
{
public class TestController : Controller
{
// GET: /Test/Shows
[AcceptVerbs(HttpVerbs.Get)]
[ActionName("Shows")]
[Authorize]
public ActionResult SelectedShows()
{
ShowsData shows = MvcApplication.Shows;
ShowsModel model = new ShowsModel();
model.Operation = Operations.View;
model.Name = shows.Name;
model.Number = shows.Number;
return View(model);
}
// POST: /Test/Shows
[AcceptVerbs(HttpVerbs.Post)]
[ActionName("Shows")]
[ValidateInput(false)]
[Authorize]
public ActionResult ShowsSubmit(ShowsModel data)
{
string name = data.Name;
int number = data.Number;
ShowsModel model = new ShowsModel();
if (Request.Form.AllKeys.Contains("btnEdit"))
{
ShowsData shows = MvcApplication.Shows;
model.Name = shows.Name;
model.Number = shows.Number;
model.Operation = Operations.Edit;
}
else if (Request.Form.AllKeys.Contains("btnCancel"))
{
ShowsData shows = MvcApplication.Shows;
model.Name = shows.Name;
model.Number = shows.Number;
model.Operation = Operations.View;
}
else if (Request.Form.AllKeys.Contains("btnSaveEdit"))
{
ShowsData shows = MvcApplication.Shows;
shows.Name = name;
shows.Number = number;
model.Name = shows.Name;
model.Number = shows.Number;
model.Operation = Operations.View;
}
return View("Shows", model);
}
}
}
View:
#model MvcIssues.Models.ShowsModel
<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>
<h2>Test Page</h2>
<div>
Show = #this.ViewData.Model.Name
<br />
Number = #this.ViewData.Model.Number.ToString()
</div>
<hr />
<div>
#Html.ValidationSummary(true, "oops!")
#using (Html.BeginForm())
{
<div>
Name: #(this.ViewData.Model.Operation == MvcIssues.Models.Operations.View ?
Html.TextBoxFor(m => m.Name, new { disabled = "disabled", maxLength = "20" })
:
Html.TextBoxFor(m => m.Name))
#Html.ValidationMessageFor(m => m.Name)
<br />
Number: #(this.ViewData.Model.Operation == MvcIssues.Models.Operations.View ?
Html.TextBoxFor(m => m.Number, new { disabled = "disabled" })
:
Html.TextBoxFor(m => m.Number))
#Html.ValidationMessageFor(m => m.Number)
</div>
<div>
#switch (this.ViewData.Model.Operation)
{
case MvcIssues.Models.Operations.Edit:
<input type="submit" name="btnSaveEdit" value="Save" />
<input type="submit" name="btnCancel" value="Cancel" />
break;
case MvcIssues.Models.Operations.View:
default:
<input type="submit" name="btnEdit" value="Edit" />
break;
}
</div>
}
</div>
If anyone can help me it would be much appreciated.
I had the same problem too. Here's what caused it, and how I fixed it:
The cause:
[Authorize]
[HttpGet]
public ActionResult BidToolv2(BidToolv2ViewModel model)
{
...
The fix:
[Authorize]
[HttpGet]
public ActionResult BidToolv2()
{
BidToolv2ViewModel model = new BidToolv2ViewModel();
Essentially the problem was when the user first visited the page, the controller took an empty model and when the page loaded, it assumed it had already been passed the model (perhaps?). Not totally sure on that, but to fix it I removed the model as a parameter and instead created a model in the controller action itself
Hope this helps!
Okay, posted this to asp.net forum. Probably a little bit more concisely worded version of the same question.
Solution was a bit of a hack but seems to be working well - created empty constructors for my problematic view model classes and inside the empty constructors I initialized the properties to valid values. Did the trick.
You need Required to make sure something is entered.
You need Range to make sure when something is entered that the values meet your requirements
Example:
[Required(ErrorMessage="Weekly Rental value is required")]
[Range(1, 9999, ErrorMessage = "Value must be between 1 - 9,999")]
public string WeeklyRental { get; set; }
I have a class and create an instance and fill a property in my index but when I push the submit button in my view and return again to my index action the property of my class is null.
How can I save the data when I return to my action and retrieve it? Is it possible?
I used viewbag and viewdata in my index and fill theme but when returned to index action again all of theme were null :(
public class myclass
{
public string tp { get; set; }
}
public class HomeController : Controller
{
//
// GET: /Home/
myclass myc = new myclass();
public ActionResult Index()
{
myc.tp = "abc";
return View(myc);
}
}
View:
#model MvcApplication2.Controllers.myclass
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
#using (Html.BeginForm())
{
<input id="Submit1" type="submit" value="submit" />
}
</body>
</html>
simply use either GET or POST method in your Controller according to your form method like,
[HttpGet]
public ActionResult Index(string id)
{
myc.tp = id;
return View(myc);
}
In your HttpPost you can get the model and see it's properties if you provided input fields for the properties in your view.
[HttpPost]
public ActionResult Index(myclass myc)
{
//check the myc properties here
return View(myc);
}
Then in your View:
#using (Html.BeginForm())
{
#Html.TextBoxFor(m => m.tp)
Is it possible to add an error for input via ModelState.AddModelError(inputId) to have error highlight on UI and to have it to have to behave as like client validation, i.e. when user changes smth in the input error class would be removed.
Model:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
ModelState.AddModelError("foo", "Foo is required");
return View(new MyViewModel());
}
}
View:
#model MyViewModel
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.EditorFor(x => x.Foo)
#Html.ValidationMessageFor(x => x.Foo)
<button type="submit">OK</button>
}
Now when the page is rendered, the Foo field will be highlighted red with an error and when the user types something into the field and blurs out, the error will be removed.
We have a field on our model which has a [Remote] attribute. When we store that field on a Hidden form element and then try to submit that form we have to click the submit button twice. Also interesting is that the 2nd time we click it no remote validation is occurring (so says Fiddler).
Thoughts?
Unable to repro. If the hidden field is decorated with the Remote attribute you won't be able to submit the form no matter how many times you click on the submit button if the remote function sends false.
For example:
Model:
public class MyViewModel
{
[HiddenInput(DisplayValue = false)]
[Remote("Check", "Home")]
public string Id { get; set; }
[Required]
public string Name { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel
{
Id = "1"
});
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return View(model);
}
public ActionResult Check(string Id)
{
return Json(Id == "2", JsonRequestBehavior.AllowGet);
}
}
View:
#model AppName.Models.MyViewModel
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.EditorForModel()
<input type="submit" value="OK" />
}
Because the remote function will always return false this form cannot be submitted. If the remote function returns true a single click would be enough to submit it assuming of course that the other validation passed.