點擊按鈕檢查所有字段是否爲空

Question

我現在有一個表格，根據用戶意圖會帶來運行不同的報表。但是，無論何時我在沒有輸入數據的情況下提交表單時，都會收到一條我不希望用戶看到的錯誤消息。爲了解決這個問題，我想阻止用戶在沒有輸入數據時提交表單。

HTML：

<content id="GenerateReportContent" class="col-md-4"> 
    @ViewBag.ErrorMessage 
    @using (Html.BeginForm("ReportSelection", "Reports", FormMethod.Post, new { @id = "GenerateReportContainer" })) { 
     <div class="AltFunctions"> 
      <ul> 
       <li> 
        <a href="javascript:document.getElementById('GenerateReportContainer').reset();" class="AltButton" id="altClearButton">Clear</a> 
       </li> 
       <li> 
        <a href="#" class="AltButton" id="GRaltInfoButton">Info</a> 
       </li> 
      </ul> 
     </div> 

     <h1 id="GenerateReportHeader">GENERATE REPORT</h1> 

     <input type="hidden" name="ClientID" value="@Model.ClientID" /> 

     @Html.TextBox("ClaimNo", "", new { @id = "txtGRCSelect", @class = "form-control", placeholder = "Enter Specific Claim Number..." }) 
     <p id="txtOptional">(optional)</p> 

     @Html.DropDownListFor(m => m.ReportTypeOptions.First().ReportID, new SelectList(Model.ReportTypeOptions, "ReportID", "ReportName"), "Select Report", new { @class = "GRDropDown", @id = "ReportDD", onchange = "disableFunction()" }) 
     <br /> 

     @Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { @id = "SuppNameDD", @class = "GRDropDown", disabled = true }) 
     @Html.ValidationMessageFor(m => m.SupplierID, "", new { @class = "text-danger" }) 
     <br /> 

     @Html.DropDownListFor(m => m.ReviewPeriodID, new SelectList(Model.ReviewPeriods, "ReviewPeriodID", "ReviewPeriodName"), "Select Review Period", new { @id = "ReviewPeriodDD", @class = "GRDropDown", disabled = true }) 
     @Html.ValidationMessageFor(m => m.ReviewPeriodID, "", new { @class = "text-danger" }) 

     <div class="form-group"> 
      @Html.TextBox("MonthCode", "", new { @id = "txtGRC", @class = "form-control", placeholder = "Enter Month Code...", disabled = true, onchange = "submitFunction" }) 
      <p id="txtOptional">(optional)</p> 

     </div> 
     <button type="submit" value="Submit" id="GenerateReportButton" class="btn btn-default">GO</button> 
    } 
</content> 

JQUERY：

function disableFunction() { 
      if ($("#ReportDD").val() == '0') { 
       $('#SuppNameDD').prop('disabled', false); 
       $('#ReviewPeriodDD').prop('disabled', false); 

      } 
      else if ($("#ReportDD").val() == '1') { 
       $('#SuppNameDD').prop('disabled', false); 
       $('#ReviewPeriodDD').prop('disabled', false); 
      } 
      else if ($("#ReportDD").val() == '2') { 
       $('#SuppNameDD').prop('disabled', false); 
       $('#ReviewPeriodDD').prop('disabled', false); 
      } 
      else if ($("#ReportDD").val() == '3') { 

       $('#ReviewPeriodDD').prop('disabled', false); 
       $('#txtGRC').removeAttr('disabled'); 
      } 
     }; 

我完全新的JQuery的，所以我不知道該怎麼做。我已經看過JQuery驗證，但沒有看到如何使用它。

Answer 1

$(document).ready(function() { 
    $('form').on('submit', function(e){ 
    // validation code here, check that the inputs are not epmty 
    if(!valid) { 
     e.preventDefault(); 
    } 
    }); 
});