alert user if incorrect data

Question

User1571524970 posted

Hi guys,

I am working on an mvc project in which I have a view for a form. This form has various inputs and the user must enter all information, if any input fields are left blank then I need to alert the user with a popup saying "Please complete all mandatory fields.* " This alert must be the exactly the same as the image below (I am not sure if it is jQuery etc.) and the user must be able to close the alert

My controlller (currently the School.ValidationMsg is shown in raw text but I need to emulate the above picture):

        [HttpPost]
        [ActionName("BookingForm")]
        public ActionResult BookingFormPost(Booking model)
        {
            if (ModelState.IsValid)
            {
                //add booking
                db.Bookings.Add(model);
                //make used date unavailable in datepicker
                Datepicker date = db.Dates.First(m => m.Date == model.Date);
                db.Dates.Remove(date);

                db.SaveChanges();
                return RedirectToAction("Index","Home");
            }

            //pass form data back to be fully resubmitted
            var School = new School();
            School = db.Schools.First(m => m.RollNumber == model.RollNumber);
            School.Date = model.Date;
            School.ValidationMsg = "Please complete all fields";

            return View(School);
        }

Cheers

Answer 1

User-474980206 posted

I don't see your image on this post, but this would all be done in javascript. if you are using jQuery validation., then you need a custom showErrors() function. If you are using unobtrusive validation (which uses jQuery validation), it supplies one you need to override. also you will need on page load to display the validation summary if it is visible via your alert.

if you are not using any client validation (server only), then your client code just needs to reformat the validation summary on page load.

Answer 2

User1571524970 posted

I don't see your image on this post, but this would all be done in javascript. if you are using jQuery validation., then you need a custom showErrors() function. If you are using unobtrusive validation (which uses jQuery validation), it supplies one you need to override. also you will need on page load to display the validation summary if it is visible via your alert.

if you are not using any client validation (server only), then your client code just needs to reformat the validation summary on page load.

cheers for the reply.

here's the image if you can't see it: 

i will work on what you said and hopefully implement it

Answer 3

User-17257777 posted

Hi darego,

From the code of your controller, I think you are verifying on the server side. When the verification fails, you store the error information in the ValidationMsg and return the school to the view. Display the alert by judging whether there is a value. The style of this alert is very similar to that of Bootstrap. I will give you an example with bootstrap alert, the code shows as below:

View:

@if (Model.ValidationMsg != null)
{
    <div id="myAlert" class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        @Model.ValidationMsg
    </div>
}

Result:

Best Regards,

Jiadong Meng.

Answer 4

User1571524970 posted

Hi darego,

From the code of your controller, I think you are verifying on the server side. When the verification fails, you store the error information in the ValidationMsg and return the school to the view. Display the alert by judging whether there is a value. The style of this alert is very similar to that of Bootstrap. I will give you an example with bootstrap alert, the code shows as below:

View:

@if (Model.ValidationMsg != null)
{
    <div id="myAlert" class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        @Model.ValidationMsg
    </div>
}

Result:

Best Regards,

Jiadong Meng.

thanks a lot Jiadong. Works fine