How to fire validation in MVC before postback

See more:

MVC4

I have design the MVC form which contains some fields. I want to throw confirmation box before submitting information. But in my case if I fill invalid data and press SUBMIT button it is showing confirmation box first and then shows the validation.

I want to show the validations before the confirmation box. Once all the fields are validated then only it should ask for confirmation.

I am attaching the chtml code for the reference...............

What I have tried:

@model SECU_CAMSPlus_DEV.Models.Manufacturer

@{
ViewBag.Title = "EditManufacturer";
Layout = null;
}

@if (TempData["invalidmsg"] != null)
{
<script> $("#divinvalid").show();
$("#btnRefresh").hide(); </script>
}
@if (TempData["notice"] != null)
{
<script> $("#divSuccess").show(); $("#btnRefresh").hide(); </script>
}

<script language="javascript" type="text/javascript">
function varcharonly(evt)
{
var e = evt
if (window.event) { //IE
var ascii = e.keyCode;
}
else if (e.which) { // Safari 4, Firefox 3.0.4
var ascii = e.which
}
if ((ascii == 8 || ascii == 127) || (ascii > 64 && ascii < 91) || (ascii > 96 && ascii < 123) || (ascii == 32 || ascii == 44 || ascii == 45 || ascii == 95 || ascii == 46 || ascii == 47) || (ascii > 47 && ascii < 58)) {
return true;
}
else {
return false;
}
}
function charonly() {
var ascii = event.keyCode
if ((ascii == 8 || ascii == 127) || (ascii > 64 && ascii < 91) || (ascii > 96 && ascii < 123) || (ascii == 32) || (ascii == 38)) {
event.returnValue = true;
}
else {
event.returnValue = false;
}
}
function IsValidCompanyName()
{
$("#errorInValidCompanyName").html('');
var pwdreg = /^[a-zA-Z ]+$/;
var pwdval = $("#txtCompanyName").val();
if (!pwdreg.test(pwdval)) {
$("#txtCompanyName").after('Use Alphabets only');
$('#btnaddManufacturer').attr('disabled', true);
}
else {
$("#errorInValidCompanyName").html('');
$('#btnaddManufacturer').attr('disabled', false);
}
}
function setValue()
{
$("#errorInValidCompanyName").remove();
$('#btnaddManufacturer').attr('disabled', false);
}

</script>

@*<script>
$("#SelectedWidgetId").on("change", function () {
$("#SelectedWidgetId option:selected").text();
$('#costLabel').text('Total price: ' + newText);
console.log($("#SelectedWidgetId").val());
});
</script>*@





@using (Html.BeginForm("Create", "Manufacturer", FormMethod.Post, new { @id = "ManufacturerMasterCreate" }))
{ @Html.ValidationSummary(false, null, htmlAttributes: new { @class = "valiation" })
@Html.AntiForgeryToken()



}




[Required]
[Display(Name = "Company Name *")]
public string CompanyName
{
get { return _CompanyName; }
set { _CompanyName = value; }
}

[Required]
[Display(Name = "Device Name *")]
public string DeviceTypeName
{
get { return _DeviceTypeName; }
set { _DeviceTypeName = value; }
}