javascript - 非提交按钮上的文本验证必需属性？

Question

我有一个简单的表格，我可以填写它的文本框，并且有一个文本框 EndDate 当然是空的。填写所有信息后，我可以单击“保存”按钮完成所有操作。

下面是我的引用代码:

function updateData(id, uniquecode, startdate) {
  var enddate = $('#txtEndDate').val();
  var radioEnableStatus = $("input[name='radioEnableStatus']:checked").val();

  $.ajax({

    url: 'updateUrl.jsp',
    type: 'POST',
    data: {
      'id': id,
      'uniquecode': uniquecode,
      'startdate': startdate,
      'enddate': enddate,
      'enable': radioEnableStatus
    },

    success: function(data) {
      alert("Successfully updated");
    },
    error: function(request, error) {
      alert("Request: " + JSON.stringify(error));
    }
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
File Name:<input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br> URL Link:<input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br> Start Date:<input type="text" name="Start Date" value="<%=currentDate%>"
  readonly><br><br> End Date:<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" readonly required/><br><br> Enable: <input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On &nbsp;
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off &nbsp;




<br><br><input type="button" value="Save" onclick="updateData('<%=id%>','<%=uniquecode%>','<%=currentDate%>')">

问题出在我的 EndDate 上，如果它留空并且我单击保存按钮，它仍然会触发该功能，但我不希望发生这种情况，因为需要 EndDate 文本框。

是否有解决方法来提醒用户，使他们在不填写结束日期文本框的情况下无法“保存”？

Answer 1

您可以为特定字段添加一个简单的检查，例如:

function updateData(id, uniquecode,startdate) {
    var enddate = $('#txtEndDate').val();
    var radioEnableStatus = $("input[name='radioEnableStatus']:checked").val();


    if( enddate != "" ) {
        $.ajax({

            url : 'updateUrl.jsp',
            type : 'POST',
            data : {
                'id' : id,
                'uniquecode': uniquecode,
                'startdate':startdate,
                'enddate': enddate,
                'enable':radioEnableStatus
            },

            success : function(data) {
                alert("Successfully updated");
            },
            error : function(request,error)
            {
                alert("Request: "+JSON.stringify(error));
            }
        });
    }else{
        alert('EndDate field is required.')
    }

}

function updateData(id, uniquecode, startdate) {
  var enddate = $('#txtEndDate').val();
  var radioEnableStatus = $("input[name='radioEnableStatus']:checked").val();

  if (enddate) {
    alert('Ajax request.');
  } else {
    alert('EndDate field is required.');
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
File Name:<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<br><br> URL Link:<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
<br><br> Start Date:<input type="text" name="Start Date" value="<%=currentDate%>" readonly>
<br><br> End Date:<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" required/>
<br><br> Enable:
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On &nbsp;
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off &nbsp;
<br><br>
<input type="button" value="Save" onclick="updateData('<%=id%>','<%=uniquecode%>','<%=currentDate%>')">