CODEWITHSUNDEEP
asp.net-mvcformstwitter-bootstrapjquery-validateunobtrusive-validation
neda Derakhshesh
neda Derakhshesh

Reputation: 1163

Validation for Bootstrap modal Page Asp.net MVC

I have a form which it is in a bootstrap modal page 

 @using (Html.BeginForm("Create", "Request"))
 {
   @Html.AntiForgeryToken()
   <div class="form-group">

      <div class="col-md-10">

        @Html.EditorFor(model => model.Request.FirstName, new { htmlAttributes = new { @class = "form-control" } })

        @Html.ValidationMessageFor(model => model.Request.FirstName, "", new { @class = "text-danger" , placeholder = "FirstName" }) 

      </div>

   </div>
   //Omit other form groups for summary
 }

It works correctly when I put everything in the right way But If I for example didn't write my Name it dosent give me Error back.

I have some questions: 1 is it possible to validate inputs before posting ?, it seems jquery validation is not working?

2 is it possible to come back to that specific modal which it was open before posting

3 why It doesn't show my Errors?

this is my model :

public class Request
{
    //pkey
    public virtual int Id { get; set; }
    //Fkey
    public virtual int TourId { get; set; }

    [Required]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string FirstName { get; set; }


    [Required]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string LastName { get; set; }

    [Required]
    [EmailAddress(ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "Email")]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Email { get; set; }

    [Required]
    public virtual string Phone { get; set; }

    [MaxLength(100000000, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Comment { get; set; }


    public virtual bool FrequentTraveler { get; set; }

    [Required]
    [Range(1, 500000)]
    public virtual int TravelersCount { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
    public virtual string Date { get; set; }

    public virtual bool ContactTimePreference { get; set; }

    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Country { get; set; }


    public virtual bool Archived { get; set; }
}

I want to show Error texts which there is in ErrorResource.resx .

and this is my Create Method 

   [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,TourId,FirstName,LastName,Email,Phone,Comment,FrequentTraveler,TravelersCount,Date,ContactTimePreference,Country,Archived")] Request request)
    {
        if (ModelState.IsValid)
        {
            db.Requests.Add(request);
            db.SaveChanges();

            TempData["ResultMessage"] = "Form  Posted successfully.";
            return RedirectToAction("Index", "Tour", new { country = TempData["Country"] });
        }
        TempData["ResultMessage"] = "Try Again!";
        return RedirectToAction("Index", "Tour", new { country = TempData["Country"] });
    }

this is my head tag if needed:

<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
  <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
 <body>
      <script src="~/Scripts/jquery-1.10.2.min.js"></script>
      <script src="~/Scripts/bootstrap.min.js"></script>
      <script src="~/scripts/myjs.js"></script>
 </body>
</html>

I appreciate if some one could tell me what should be changed. thanks

Upvotes: 2

Views: 6074

Answers (1)

user3559349
user3559349

Reputation:

You need to add both (after <script src="~/Scripts/jquery-1.10.2.min.js"></script>)

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

in order to get client side validation.

Side note: It is preferable to use bundles to manage scripts and css files in your views and layouts.

Upvotes: 4

Related Questions