Сохранить и потерять фокус на Textbox на основе проверки

Question

У меня есть текстовое поле, которое позволяет пользователю вводить дату только в формате mm-dd-yyyy. Если дата действительна, пользователь сможет переместить фокус из текстового поля, но если он недействителен, фокус должен оставаться внутри текстового поля, пока пользователь не исправит его. В настоящее время я использую регулярное выражение для проверки ввода текстового поля, и я могу успешно сохранять фокус внутри текстового поля в случае неправильной даты. Проблема, с которой я сталкиваюсь, заключается в том, что даже когда я исправляю неверную дату, фокус не выходит за пределы текстового поля.

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 .: Использование Datepicker не является частью требования, было бы намного проще, я знаю. Будем благодарны за любые предложения по этому поводу.

Редактировать : Я нашел работающее решение и обновил код выше, но этот код работает только в Chrome, а не в IE11

Answer 1

Этот фрагмент проверяет, является ли дата действительной и правильно ли она отформатирована.

var dateMMDDYYYRegex = "^[0-9]{2}/[0-9]{2}/[0-9]{4}$";
/* isValidData source: /4610999/kak-proverit-datu */

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"/>

Лично я хотел бы использовать маску ввода, например this , чтобы пользователю было проще использовать ваш код. Также не забудьте проверить дату на стороне сервера. Я бы использовал библиотеку под названием Carbon , чтобы сформулировать дату.

Ссылка на код: Stackoverflow

Answer 2

Вы можете использовать событие onblur вместо события onfocusout. Пожалуйста, обратитесь к следующему коду:

<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" />

вывод, как показано ниже:

Answer 3

Вам не нужна часть else. Вы можете использовать HTMLElement.blur () чтобы убрать фокус с элемента. Вы можете легко передать элемент this в функцию, чтобы вы могли ссылаться на текущий элемент внутри функции. Я также предлагаю вам использовать событие oninput вместо onfocusout.

Попробуйте следующим образом:

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"/>