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

Question

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

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:

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";
}

Add Truck


@using (Html.BeginForm("AddTruck_Post", "Home", FormMethod.Post))
{

    
        
            Wrecker Company Name
            
        
    
    
        
            Year
            
        
        
            Make
            
                    
        
            Tag
            
        
        
            VIN
            
        
        
            TruckNumber
            
        
    
    
        
            Wrecker Class
            
        
        
            County Decal Number
            
        
        
            Insurance Carrier
            
        
        
            Policy Number
            
        

        
            Truck Appearance
            
        
    
    
        
            Amber Light Condition
            
        
        
            Fluid Absorbtion 50 lbs X 2
            
        
        
            Number Bags Fluid Absorption
            
        
    
    
        
            Info On Truck
            
        
        
            Shovel
            
        
        
            Safety Chains
            
        
        
            Crow Bar
            
        
        
            Push Broom
            
        
        
            Axe
            
        
    
    
        
            Bolt Cutters
            
        
        
            Pry Bar
            
        
        
        
            Truck is Approved
            
        
    
    
        
            Inspected By
            
        
        
            S Number
            
        
        
            Car Number
            
        
        
            Date Of Inspection
            
                
                
            
        
        


    



    @{Model.WreckerId = @ViewBag.wId;}
    @Html.HiddenFor(model => model.WreckerId)
    Close (No Save)
    

            
        }

Yiyi You · Accepted Answer

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"}))
{
   ...
   
     @{Model.WreckerId = @ViewBag.wId;}
     @Html.HiddenFor(model => model.WreckerId)
     Close (No Save)
     
   
}

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();
}

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

Answers (1)

Related Questions

Why doesn&#39;t the action method execute after return from JavaScript client side validation?

Answers (1)

Related Questions

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