Validate All the Form Fields after Submitting MVC Razor with jQuery

Question

I use jquery validation in my MVC application and after selecting and leaving an input, it is automatically validated. On the other hand, if user does not select an input, they are not validated even if submitting the form. So, I want to validate all the related fields after pressing submit button on MVC Razor page. How can I do this?

Answer 1

I created a simple example. It's just to give you a start, you still have to modify this code to your needs. This example is using jquery form validation.

Model

  public class Vehicle
    {
        public int Id { get; set; }
        public string Make { get; set; }
        public string Model { get; set; }
    }

Controller & Action

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

View

@model JqueryValidationDemo.Models.Vehicle

@{
    ViewBag.Title = "Jquery Form Validation Demo";
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
    $(document).ready(function () {
            $('#myform').validate({ // initialize the plugin
                rules: {
                    Make: {
                        required: true,
                        minlength: 2
                    },
                    Model: { required: true }
                },
                messages: {
                    Make: {
                        required: "Make is required!",
                        minlength: "Make Name at least 2 characters long!"
                    },
                    Model: {
                        required: "Modl is required!"
                    }
                },
                submitHandler:
                    $("#myform").on('submit', function () {
                        if ($("#myform").valid()) {
                            //Do something here
                            alert("Validation passed");
                        }
                        return false;
                    })
            })
    });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { @id = "myform" }))
{
    <fieldset>
        <legend>Vehicle</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Make)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Make)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Model)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Model)
        </div>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
}

Note: Be careful with your jquery reference, you don't need to use jquery.validate.unobtrusive.js.

Hope it will give you a good start.

Update: Remove keyup or keypress

Remove keypress

$("#youElementId").bind('keypress', function (e) {
    if (e.keyCode == 13) {
        return false;
    }
    return true;
});