Why doesn't the action method execute after return from JavaScript client side validation?-CodePudding

This is probably going to be simple but I can't figure it out. I have the following in the razor page:

<input type="submit" name="NewTruck"  value="Add New Truck (Save)" onclick = "validateForm()" />

And the validateForm() just checks to make sure entries are correct. All is great with the validations. I'm getting to the end where the alert says it's done but the action method on the post is not called. Sorry to include the whole thing but I though it might be necessary.

I've also tried it with the onclientclick:

<input type="submit" name="NewTruck"  value="Add New Truck (Save)" onclick = "validateForm()" onclientclick = "return validateForm()" />

function validateForm(){
    event.preventDefault();
    var truckYear = parseInt(document.getElementById('Year').value);
    if (isNaN(truckYear)) {
        alert("Truck Year must be an integer between 1925 and 2100: "   truckYear);
        return false;
    }
    if (truckYear < 1925 || truckYear > 2100) {
        alert("Truck Year must be an integer between 1925 and 2100: "   truckYear);
        return false
    }
    if (!document.getElementById('TruckNumber')) {
        var truckNumber = parseInt(document.getElementById('TruckNumber').value);
        if (isNaN(truckNumber)) {
            alert("Truck Number must be an integer");
            return false
        }
        if (truckNumber < 0) {
            alert("Truck Number must be a positive integer");
            return false
        }
    }
    if (!document.getElementById('CountyDecalNumber')) {
        var countyDecalNumber = parseInt(document.getElementById('CountyDecalNumber').value);
        if (isNaN(countyDecalNumber)) {
            alert("County Decal Number must be a number");
            return false
        }
        if (countyDecalNumber < 0) {
            alert("County Decal Number must be a positive number");
            return false
        }
    }
    if (!document.getElementById('NumberBagsFluidAbsorption')) {
        var numberBagsFluidAbsorption = parseInt(document.getElementById('NumberBagsFluidAbsorption').value);
        if (isNaN(numberBagsFluidAbsorption)) {
            alert("Number Of Bags Of Fluid Absorption must be a number");
            return false
        }
        if (numberBagsFluidAbsorption < 0) {
            alert("Number Of Bags Of Fluid Absorption must be a positive number");
            return false
        }
    }
    alert("end of test");
    return true;
}

Thank you for your time.

Here is the total HTML.

@model Towins.Models.T_Trucks

@{
ViewBag.Title = "AddTruck";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Add Truck</h2>


@using (Html.BeginForm("AddTruck_Post", "Home", FormMethod.Post))
{
<div  style="text-align: center">
    <div >
        <div >
            <label for="NewWrecker" >Wrecker Company Name</label>
            <input type="text" disabled  id="WreckerCo" name="WreckerCo" value="@ViewBag.WreckerCo" />
        </div>
    </div>
    <div >
        <div >
            <label for="Year" >Year</label>
            <input type="text"  id="Year" name="Year" />
        </div>
        <div >
            <label for="Make" >Make</label>
            <input type="text"  id="Make" name="Make" />
        </div>            
        <div >
            <label for="Tag" >Tag</label>
            <input type="text"  id="Tag" name="Tag" />
        </div>
        <div >
            <label for="VIN" >VIN</label>
            <input type="text"  id="VIN" name="VIN" />
        </div>
        <div >
            <label for="TruckNumber" >TruckNumber</label>
            <input type="text"  id="TruckNumber" name="TruckNumber" />
        </div>
    </div>
    <div >
        <div >
            <label for="WreckerClass" >Wrecker Class</label>
            <select name="WreckerClass" id="WreckerClass" >
                <option value="A">A</option>
                <option value="R">R</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </div>
        <div >
            <label for="CountyDecalNumber" >County Decal Number</label>
            <input type="text"  id="CountyDecalNumber" name="CountyDecalNumber" />
        </div>
        <div >
            <label for="InsuranceCarrier" >Insurance Carrier</label>
            <input type="text"  id="InsuranceCarrier" name="InsuranceCarrier" />
        </div>
        <div >
            <label for="PolicyNumber" >Policy Number</label>
            <input type="text"  id="PolicyNumber" name="PolicyNumber" />
        </div>

        <div >
            <label for="TruckAppearance" >Truck Appearance</label>
            <select name="TruckAppearance" id="TruckAppearance" >
                <option value="Satisfactory">Excellent</option>
                <option value="Unsatisfactory">Good</option>
                <option value="Fair">Fair</option>
                <option value="Unsatisfactory">Unsatisfactory</option>
            </select>
        </div>
    </div>
    <div >
        <div >
            <label for="AmberLightCondition" >Amber Light Condition</label>
            <select name="AmberLightCondition" id="AmberLightCondition" >
                <option value="Satisfactory">Satisfactory</option>
                <option value="Unsatisfactory">Unsatisfactory</option>
            </select>
        </div>
        <div >
            <label for="FluidAbsorbtion" >Fluid Absorbtion 50 lbs X 2</label>
            <input type="checkbox"  id="FluidAbsorbtion" name="FluidAbsorbtion" checked value="true" />
        </div>
        <div >
            <label for="NumberBagsFluidAbsorption" >Number Bags Fluid Absorption</label>
            <input type="text"  id="NumberBagsFluidAbsorption" name="NumberBagsFluidAbsorption" />
        </div>
    </div>
    <div >
        <div >
            <label for="InfoOnTruck" >Info On Truck</label>
            <input type="checkbox"  id="InfoOnTruck" name="InfoOnTruck" checked value="true" />
        </div>
        <div >
            <label for="Shovel" >Shovel</label>
            <input type="checkbox"  id="Shovel" name="Shovel" checked value="true" />
        </div>
        <div >
            <label for="SafetyChains" >Safety Chains</label>
            <input type="checkbox"  id="SafetyChains" name="SafetyChains" checked value="true" />
        </div>
        <div >
            <label for="CrowBar" >Crow Bar</label>
            <input type="checkbox"  id="CrowBar" name="CrowBar" checked value="true" />
        </div>
        <div >
            <label for="PushBroom" >Push Broom</label>
            <input type="checkbox"  id="PushBroom" name="PushBroom" checked value="true" />
        </div>
        <div >
            <label for="Axe" >Axe</label>
            <input type="checkbox"  id="Axe" name="Axe" checked value="true" />
        </div>
    </div>
    <div >
        <div >
            <label for="BoltCutters" >Bolt Cutters</label>
            <input type="checkbox"  id="BoltCutters" name="BoltCutters" checked value="true" />
        </div>
        <div >
            <label for="PryBar" >Pry Bar</label>
            <input type="checkbox"  id="PryBar" name="PryBar" checked value="true" />
        </div>
        <div ></div>
        <div >
            <label for="TruckIsApproved" >Truck is Approved</label>
            <input type="checkbox"  id="TruckIsApproved" name="TruckIsApproved" checked value="true" />
        </div>
    </div>
    <div >
        <div >
            <label for="InspectedBy" >Inspected By</label>
            <input type="text"  id="InspectedBy" name="InspectedBy" />
        </div>
        <div >
            <label for="SNumber" >S Number</label>
            <input type="text"  id="SNumber" name="SNumber" />
        </div>
        <div >
            <label for="CarNumber" >Car Number</label>
            <input type="text"  id="CarNumber" name="CarNumber" />
        </div>
        <div >
            <label for="DateOfInspection" >Date Of Inspection</label>
            <div id="DateOfInspection-group"  data-date-format="dd/mm/yyyy">
                <input type="text"  id="DateOfInspection" name="DateOfInspection" />
                <span ><i ></i></span>
            </div>
        </div>
        <br /><br />
    </div>
</div>

<div >
    @{Model.WreckerId = @ViewBag.wId;}
    @Html.HiddenFor(model => model.WreckerId)
    <a href="@Url.Action("TruckList", new { wId = ViewBag.wId })" >Close (No Save)</a>
    <input type="submit" name="NewTruck"  value="Add New Truck (Save)" onclick = "validateForm()" onclientclick = "return validateForm()" />
</div>
            
        }

CodePudding user response：

Try to add id to your form,and submit the form after alert("end of test");:

@using (Html.BeginForm("AddTruck_Post", "Home", FormMethod.Post,new { id="myForm"}))
{
   ...
   <div >
     @{Model.WreckerId = @ViewBag.wId;}
     @Html.HiddenFor(model => model.WreckerId)
     <a href="@Url.Action("TruckList", new { wId = ViewBag.wId })" >Close (No Save)</a>
     <input type="submit" name="NewTruck"  value="Add New Truck (Save)" onclick = "validateForm()"  />
   </div>
}

js:

function validateForm(){
    event.preventDefault();
    var truckYear = parseInt(document.getElementById('Year').value);
    if (isNaN(truckYear)) {
        alert("Truck Year must be an integer between 1925 and 2100: "   truckYear);
        return false;
    }
    if (truckYear < 1925 || truckYear > 2100) {
        alert("Truck Year must be an integer between 1925 and 2100: "   truckYear);
        return false
    }
    if (!document.getElementById('TruckNumber')) {
        var truckNumber = parseInt(document.getElementById('TruckNumber').value);
        if (isNaN(truckNumber)) {
            alert("Truck Number must be an integer");
            return false
        }
        if (truckNumber < 0) {
            alert("Truck Number must be a positive integer");
            return false
        }
    }
    if (!document.getElementById('CountyDecalNumber')) {
        var countyDecalNumber = parseInt(document.getElementById('CountyDecalNumber').value);
        if (isNaN(countyDecalNumber)) {
            alert("County Decal Number must be a number");
            return false
        }
        if (countyDecalNumber < 0) {
            alert("County Decal Number must be a positive number");
            return false
        }
    }
    if (!document.getElementById('NumberBagsFluidAbsorption')) {
        var numberBagsFluidAbsorption = parseInt(document.getElementById('NumberBagsFluidAbsorption').value);
        if (isNaN(numberBagsFluidAbsorption)) {
            alert("Number Of Bags Of Fluid Absorption must be a number");
            return false
        }
        if (numberBagsFluidAbsorption < 0) {
            alert("Number Of Bags Of Fluid Absorption must be a positive number");
            return false
        }
    }
    alert("end of test");
    $("#myForm").submit();
}