Validate two buttons in Asp.net MVC

Question

I have two buttons but I'm only able to validate one. When the user clicks add and the entire form is not filled out then they get error message but if they click finish instead of giving error messages, it goes to another page but I want to give the error before going to that page. This is what I have so far for one:

@model student.Models.Student

<h2>Student Record</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Issue</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.studentNumber, htmlAttributes: new { @class = "col-md-2" })
            @Html.EditorFor(model => model.studentNumber, new { htmlAttributes = new { @readonly = "readonly", @id = "reqnum", @class = "form-control" } })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "col-md-2" })
            @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.Label("Processed by:", htmlAttributes: new { @class = "col-md-2" })
            @Html.DropDownListFor(model => model.processedbyDetails.employeeNum, new SelectList(ViewBag.StoresReps, "Value", "Text"), new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.processedbyDetails.employeeNum, "", new { @class = "text-danger" })

        </div>

        @* -- MANY OTHER INPUTS -- *@


        <div class="form-group">
            <div class="col-md-offset-4 col-md-12">
                <input type="submit" value="Add" name="Add" class="btn btn-default" width="89" />
                <input type="button" value="Finish" name="Issue" margin="50px" onclick="location.href='@Url.Action("ViewIssue", "Issue")' " class="btn btn-default" />
                <input type="button" value="Cancel" name="Cancel" margin="50px" onclick="location.href='@Url.Action("Cancel", "Issue")' " class="btn btn-default" />
            </div>
        </div>
    </div>
}

Edit

@{
    ViewBag.Title = "Student Item";
}
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">

<script type="text/javascript">
 function onFinishClick() {
        if ($('form').valid()) {
            location.href = '@Url.Action("ViewIssue", "Issue")';
            }
            return false;
            }
</script>


<input type="button" value="Finish" name="Issue" margin="50px" onclick="onFinishClick()" class="btn btn-default" />

Answer 1

You're using MVC, so just annotate your ViewModel and submit the form with the built in functionality that the framework supplies for you.

public class Student
{
    [StringLength(100)]
    [DisplayName("Student Name")]
    [Required(ErrorMessage = "Please enter a Student Name")]
    public string Name { get; set; }

    [StringLength(100)]
    [DisplayName("Student Number")]
    [Required(ErrorMessage = "Please enter a Student Number")]
    public string StudentNumber { get; set; }

    // etc...
}

Your form should also have the name of the Action you're trying to POST to...

@using (Html.BeginForm("AddOrFinish", "HomeController", FormMethod.Post, new { role = "form" }))

You can't validate against the data annotations on your viewmodel in MVC from a button that's not of type submit (well, maybe you can, but probably more work).

You should then mark both buttons as type submit, then interrogate the name of the button that was clicked once it is sent over.

    <div class="form-group">
        <div class="col-md-offset-4 col-md-12">
            <input type="submit" value="Add" name="add" class="btn btn-default" width="89" />
            <input type="submit" value="Finish" name="issue" margin="50px" class="btn btn-default" />
            <input type="button" value="Cancel" name="Cancel" margin="50px" onclick="location.href='@Url.Action("Cancel", "Issue")' " class="btn btn-default" />
        </div>
    </div>

Then in your controller, create a method with this signature. Since you have two submit buttons, the values of the button will be sent along in the request and you can interrogate it. It will look something like this...

[HttpPost]
public ActionResult AddOrFinish(Student model, string add, string issue)
{
    if (!ModelState.IsValid)
    {
        return RedirectToAction("PageImOnNow", model);
    }

    if (!string.IsNullOrEmpty(add))
    {
        // do your add logic
        // redirect to some page when user clicks "Add"
        return RedirectToAction("WhateverPageYouWant");
    }
    else
    {
        // do your finish logic
        // redirect to ViewIssue page when user clicks "Finish"
        return RedirectToAction("ViewIssue");
    }
}

More information here -

Handling multiple submit buttons on a form in MVC

Best Practices for ViewModel validation in MVC