Text validation required attribute on non-submit button?

Question

I have a simple form that I can fill up its textboxes and there is one textbox EndDate which is empty of course. After filling all the info, I can click the Save button to finalize everything.

Below is my code for references:

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

The problem is for my EndDate, if it's left empty and I click on the save button, it still fires the function but I don't want that to happen since EndDate textbox is required.

Is there a workaround this to alert the user so they cannot "save" without filing the end date textbox?

Answer 1

You can add a simple check for the specific field like :

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