為什么從JavaScript客戶端驗證回傳后action方法不執行？-有解無憂

這可能很簡單，但我無法弄清楚。我在剃刀頁面中有以下內容：

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

validateForm() 只是檢查以確保條目正確。驗證后一切都很好。我快到了警報說它已完成但未呼叫帖子上的操作方法的結尾。很抱歉把整個事情都包括在內，但我認為這可能是必要的。

我也用 onclientclick 試過：

<input type="submit" name="NewTruck" class="btn btn-primary " 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;
}

感謝您的時間。

這是總的 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 class="text" style="text-align: center">
    <div class="form-row">
        <div class="form-group col-4">
            <label for="NewWrecker" class="col-form-label">Wrecker Company Name</label>
            <input type="text" disabled class="form-control" id="WreckerCo" name="WreckerCo" value="@ViewBag.WreckerCo" />
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-2">
            <label for="Year" class="col-form-label">Year</label>
            <input type="text" class="form-control" id="Year" name="Year" />
        </div>
        <div class="form-group col-2">
            <label for="Make" class="col-form-label">Make</label>
            <input type="text" class="form-control" id="Make" name="Make" />
        </div>            
        <div class="form-group col-2">
            <label for="Tag" class="col-form-label">Tag</label>
            <input type="text" class="form-control" id="Tag" name="Tag" />
        </div>
        <div class="form-group col-4">
            <label for="VIN" class="col-form-label">VIN</label>
            <input type="text" class="form-control" id="VIN" name="VIN" />
        </div>
        <div class="form-group col-2">
            <label for="TruckNumber" class="col-form-label">TruckNumber</label>
            <input type="text" class="form-control" id="TruckNumber" name="TruckNumber" />
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-1">
            <label for="WreckerClass" class="col-form-label">Wrecker Class</label>
            <select name="WreckerClass" id="WreckerClass" class="form-control">
                <option value="A">A</option>
                <option value="R">R</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
        </div>
        <div class="form-group col-2">
            <label for="CountyDecalNumber" class="col-form-label">County Decal Number</label>
            <input type="text" class="form-control" id="CountyDecalNumber" name="CountyDecalNumber" />
        </div>
        <div class="form-group col-4">
            <label for="InsuranceCarrier" class="col-form-label">Insurance Carrier</label>
            <input type="text" class="form-control" id="InsuranceCarrier" name="InsuranceCarrier" />
        </div>
        <div class="form-group col-3">
            <label for="PolicyNumber" class="col-form-label">Policy Number</label>
            <input type="text" class="form-control" id="PolicyNumber" name="PolicyNumber" />
        </div>

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

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

uj5u.com熱心網友回復：

嘗試將 id 添加到您的表單中，然后提交表單alert("end of test");：

@using (Html.BeginForm("AddTruck_Post", "Home", FormMethod.Post,new { id="myForm"}))
{
   ...
   <div class="modal-footer">
     @{Model.WreckerId = @ViewBag.wId;}
     @Html.HiddenFor(model => model.WreckerId)
     <a href="@Url.Action("TruckList", new { wId = ViewBag.wId })" class="btn btn-primary">Close (No Save)</a>
     <input type="submit" name="NewTruck" class="btn btn-primary " 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();
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/428788.html

標籤：javascript html asp.net 核心

上一篇：合并2列相等的日期串列

下一篇：根據IO流的內容獲取IO