Retain and lose focus on Textbox based on validation

Question

I have a Textbox which will only allow user to input date in mm-dd-yyyy format. If the date is valid, the user will be able to move focus out of the textbox but if it's invalid, the focus should remain inside the textbox until the user corrects it. Currently I am using regex to validate the textbox input and I am able to successfully keep focus inside the textbox in case of invalid date. The issue I am facing is, even when I am correcting the invalid date, the focus does not move out of the textbox.

var dateCheck = function() {
    var value = $("#txtbox1").val()


    if (/^(0[1-9]|1[0-2])-(0[1-9]|1\d|2\d|3[01])-(19|20)\d{2}$/.test(value)) {
        $("#txtbox1").blur();
        return true;
    }
    else {
        $("#txtbox1").focus().on('blur', function () {
            $(this).focus();
            return false;
        });
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" size="12" class="form-control" onfocusout="dateCheck()" id="txtbox1"/>

P.S : Using Datepicker is not part of the requirement, would have been much easier I know. Any leads regarding this would be appreciated.

Edit: I have found a working solution and have updated the code above, but this code works only in Chrome and not in IE11

just as a sidenote, I would consider transforming the date server side. This adds usability. — Patrick Schocke, Nov 06 '18 at 06:45
@KuebelElch15 any ideas or links where I can explore this possibility? — subhrendu, Nov 06 '18 at 06:53

Mamun · Answer 1 · 2018-11-06T07:02:32.350

You do not need the else part. You can use HTMLElement.blur() to remove the focus from the element. You can easily pass this element to the function so that you can refer the current element inside the function. I will also suggest you to use oninput event instead of onfocusout.

Try the following way:

var dateCheck = function(el) {
  var value = $(el).val();
  if (/^(0[1-9]|1[0-2])-(0[1-9]|1\d|2\d|3[01])-(19|20)\d{2}$/.test(value)) {
    el.blur();
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" size="12" class="form-control" oninput="dateCheck(this)" id="txtbox1"/>

score 0 · Answer 2 · answered Nov 06 '18 at 07:01

This snipped checks if the date is valid and if it is correctly formatted.

var dateMMDDYYYRegex = "^[0-9]{2}/[0-9]{2}/[0-9]{4}$";
/* isValidData source: http://stackoverflow.com/questions/5812220/how-to-validate-a-date */

function isValidDate(s) {
  var bits = s.split('/');
  var d = new Date(bits[2], bits[0] - 1, bits[1]);
  return d && (d.getMonth() + 1) == bits[0] && d.getDate() == Number(bits[1]);
}
var dateCheck = function() {
  var value = $("#txtbox1").val();        
  if(value.match(dateMMDDYYYRegex) && isValidDate(value)){
    $("#txtbox1").blur();
    return true;
  } else {
    $("#txtbox1").focus().on('blur', function () {
      $(this).focus();
      return false;
    });
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" size="12" class="form-control" onfocusout="dateCheck()" id="txtbox1"/>

Personally I would consider using an input mask like this one to make it easier for the user to use your code. Also don't forget to validate the date serverside. I would use a libary called Carbon to phrase the date.

Reference to the code: Stackoverflow

score 0 · Answer 3 · answered Nov 07 '18 at 08:18

You could use onblur event, instead of using onfocusout event. Please refer to the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    var dateCheck = function () {
        var value = $("#txtbox1").val()
        if (/^(0[1-9]|1[0-2])-(0[1-9]|1\d|2\d|3[01])-(19|20)\d{2}$/.test(value)) {
            $("#txtbox1").blur();
        }
        else {
            $("#txtbox1").focus();
        }
    };
</script>
<input type="text" size="12" class="form-control" onblur="dateCheck()" id="txtbox1" />

the output as below:

Retain and lose focus on Textbox based on validation

3 Answers3