Converting an #Html.Textbox button to submit button - asp.net-mvc

Question

I am trying to convert an #Html.Textbox image button to submit button with the onclick calling a Javascript function but I can't seem to figure out the validation part. I believe it does need to be a submit button.
I am basically trying to get rid of the image but keep the functionality.
Here's what's working today.
#Html.TextBox("Next", null, new {type = "image", src = #Url.Content("../App_Themes/icons/button_next.png"), #class = "imgbottom", onclick = "javascript: ValidateSelection ($(\"[name$='selectedItems']:checked\"))"})
function ValidateSelection(item) {
if (item == null || item.length == 0) {
var validationSummary = $('.validation-summary-errors ul');
if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) {
validationSummary.append('<li>' + "Please select at least one item" + '</li>');
}
var errors = $("[name='ErrorMessage']");
if (errors.length > 0) {
errors.hide();
}
var buttonGenerateReport = $("#GenerateReport");
if (buttonGenerateReport.length > 0) {
buttonGenerateReport.hide();
}
event.preventDefault();
}
}

Answer 1

<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');">
<img src="#Url.Content("~/App_Themes/icons/button_next.png")" alt="Next" /><br />
Next
</button>
The "~/" part of the Url Content string represents your project root, so adjust it to fit your correct file address later.
Or you could just use FontAwesome and replace your image entirely by that. It's size scalable because of CSS and has a simpler syntax.
<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');">
<i class="fa fa-angle-double-right" aria-hidden="true"></i> Next
</button>
Then in your jQuery function:
function ValidateSelection(elementName){
var selectedItems = $("[name='" + elementName + "']:checked");
if (selectedItems === null || selectedItems.length === 0) {
var validationSummary = $('.validation-summary-errors ul');
if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) {
validationSummary.append('<li>' + "Please select at least one item" + '</li>');
}
var errors = $("[name='ErrorMessage']");
if (errors.length > 0) {
errors.hide();
}
var buttonGenerateReport = $("#GenerateReport");
if (buttonGenerateReport.length > 0) {
buttonGenerateReport.hide();
}
event.preventDefault();
}
}