Заблокировать форму для 2 полей с неверной датой - PullRequest
Новая
       31

Заблокировать форму для 2 полей с неверной датой

0 голосов
/ 02 февраля 2012

Мне нужна помощь, чтобы решить мою проблему.У меня есть 2 поля ввода с такой маской (http://digitalbush.com/projects/masked-input-plugin/)> 12/2010 (мм / гггг).

Я хочу, чтобы пользователь мог зарегистрировать форму, когда дата действительна, или оставитьпусто, и отправьте уведомление в div, когда дата недействительна.

Это нормально работает, если у меня есть 1 поле, но когда у меня есть 2 поля, если пользователь вводит правильную дату во втором, онможете зарегистрировать форму.

Иначе, если у вас есть идея ограничить дату окончания, которая может быть раньше даты начала ...

Спасибо за любую помощь;)

Мой HTML-код: 

<form id="blockdate">
<div>date start: <input class="date" type="text"></div>
<div>date end: <input class="date2" type="text"></div>
<div><input class="submit" type="submit"></div>
<div id="msg"></div>
</form>

Мой JS-код: 

        function verifyDate(datevalue) {

      var done = false;

      if(datevalue != null || datevalue != ''){
        var tmp = datevalue.split('/');
        var month = tmp[0];
        var year = tmp[1];

       if(month >= 1 && month <= 12){
       if(year >= 1990 && year <= 2099){
           clean();
           done = true;
          }
          else {
            $('#msg').html('Year invalid 1900 - 2099.');
          }
       } else {
          $('#msg').html('Month invalid');
       }     
    } if (datevalue < 1 ) {
        done = true;
    }

    return done;
  }
function verifyDate2(datevalue2) {

      var done = false;

      if(datevalue2 != null || datevalue2 != ''){
        var tmp = datevalue2.split('/');
        var month = tmp[0];
        var year = tmp[1];

       if(month >= 1 && month <= 12){
       if(year >= 1990 && year <= 2099){
           clean();
           done = true;
          }
          else {
            $('#msg').html('Year invalid 1900 - 2099.');
          }
       } else {
          $('#msg').html('Month invalid');
       }     
    } if (datevalue2 < 1 ) {
        done = true;
    }

    return done;
  }



  function clean() {
     $('#msg').html('');
  }

    jQuery(function($) {
     $(".date").mask("99/9999");   

       $('.blockdate').submit(function() {
          var datevalue = $('.date').val();
          var datevalue2 = $('.date2').val();
          return verifyDate(datevalue);
       });

       $(".date").change(function(){
        var datevalue = $(this).val();
          if(datevalue.length == 7) {
            verifyDate(datevalue);
          } else {
            clean();
          }
      });


    jQuery(function($) {
     $(".date2").mask("99/9999");   

       $('.blockdate').submit(function() {
          var datevalue2 = $('.date2').val();
          return verifyDate2(datevalue2);
       });

       $(".date2").change(function(){
        var datevalue2 = $(this).val();
          if(datevalue2.length == 7) {
            verifyDate2(datevalue2);
          } else {
            clean();
          }
      });

    });

    });

Ответы [ 2 ]

1 голос
/ 02 февраля 2012

  1. Можно начать с отключения кнопки отправки до тех пор, пока все поля формы не будут действительными, затем включить ее $("submit").prop("disabled",true);

  2. Вкл. $(input).blur() проверить, оба лидопустимые значения ввода.

  3. Получить оба значения года и сравнить их: startdate <= enddate

  4. Включить кнопку отправки

Улучшения:

if(datevalue2 != null || datevalue2 != '') => || должно быть, вероятно, && => может быть записано как: if(!datevalue2)

var datevalue2 = $('.date2').val();
          return verifyDate2(datevalue2);

=>return verifyDate2($('.date2').val())

РЕДАКТИРОВАТЬ:

вам нужна только одна функция проверки, они идентичны.

попробуйте это, чтобы предотвратить отправку формы на неправильные входы: 

  if(year >= 1990 && year <= 2099){
       clean();
       done = true;
        $(".submit").prop("disabled",false);
      }

   else {
        $('#msg').html('Year invalid 1900 - 2099.');
        $(".submit").prop("disabled",true);
      }
   } else {
      $('#msg').html('Month invalid');
      $(".submit").prop("disabled",true);
   }
1 голос
/ 02 февраля 2012

Я могу немного упростить вашу задачу, предоставив небольшое регулярное выражение. 

`^([0]?\d|1[0-2])/(199\d|20\d{2})$`

используйте его таким образом 

function TestDate(input) {
    var pattern = /^([0]?\d|1[0-2])\/(199\d|20\d{2})$/;
    return pattern.test(input);
}

Он проверяет погоду в первой части, т.е. лежит между 1 и 12и вторая часть между 1990 и 2099 годами.

РЕДАКТИРОВАТЬ

После того, как вы проверили правильность формата, вы можете увидеть диапазон следующим образом 

function RangeOk (lowerDate, upperDate) {
    return GetNumeric(lowerDate) < GetNumeric(upperDate);
}

function GetNumeric(input) {
    var parts = input.split("/");
    var yearNum = parseInt(parts[1]) * 12;
    // Get rid of leading 0 if exists
    // It can be there as the pattern above allows it.
    yearNum += parseInt(parts[0].replace(/0(\d)/, "$1"));
    return yearNum;
}

Есть небольшой математический трюк.

...