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%>')">

Answer 2

最简单的方法是添加required属性，浏览器将停止用户提交按钮的表单，其中type=submit

参考：

Answer 3

您可以这样做。一个简单的方法。也许不是一个好方法，但是仍然可以正确地完成工作。

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 {
        //Do something 
    }
}

非提交按钮上是否需要文本验证属性？

3 个答案: