jQuery日期输入条件

Question

我有以下正常工作的 JQuery 函数：

$(function () {
    $('#accmenu').change(function() {
        $(".insightsgraphs div").hide();
        $(".insightsoptions input").removeClass("green");
        $("#newLikes").one('click', function () {
            $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    var json = response.replace(/"/g,'');
                    json = "[" + json + "]";
                    json = json.replace(/'/g,'"');
                    var myData = JSON.parse(json);
                    var myChart = new JSChart('dailyNewLikes', 'line');
                    myChart.setDataArray(myData);
                    myChart.setAxisNameX('');
                    myChart.setAxisNameY('');
                    myChart.setAxisValuesColorX('#FFFFFF');
                    myChart.setSize(470, 235);
                    myChart.setTitle('Daily New Likes');
                    myChart.draw();
                }});
            return false;
        });
        $("#unlikes").one('click', function () {
            $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
                function(response) {
                    $("#dailyUnlikes").html(response);
                }});
            return false;
        });
    });
    $("#newLikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyNewLikes').toggle();
        return false;
    });
    $("#unlikes").on('click', function(){
        $(this).toggleClass('green');
        $('#dailyUnlikes').toggle();
        return false;
    });
});

但我想创建一个条件：如果以下两个日期输入之一：

var since = $('#dateoptions input[name="since_date"]').val();
var until = $('#dateoptions input[name="until_date"]').val();

为空 我想收到警报，并且仅在满足条件时才执行 .one() 函数。例如，当我在没有输入日期的情况下单击其中一个按钮时，我希望收到类似alert("One of the date or both missing") 的警报，并且在我选择日期并再次按下按钮以执行上面的.one() 函数后例子。我希望我让自己足够清楚。我知道我可以使用类似的东西：

if (until == "" || since == "") {
    alert("One of the date or both missing")
} else {}

但是到目前为止我的尝试没有成功。可能我没有将条件放在应有的位置...此外，还可以通过警报将输入集中、突出显示或类似的东西？

编辑： 这是一个小提琴： http://jsfiddle.net/DanielaVaduva/ueA7R/6/ 我用其他东西替换了 ajax 调用而不修改流程。

Answer 1

尝试检查您的价值观：

if (until.trim().length === 0 || since.trim().length === 0) {
    //TODO here
}

我建议您检查输入中的 name 属性，并检查它是否与您在检索输入值时使用的相同。

如果仍然无法正常工作，请尝试一些“调试”，例如：

console.log(since);

并检查它是否正确地获得了您的价值。

更新

我不知道你是否想要这个 (demo)。如果您的日期为空，它将无法正常工作。 AJAX 调用在 JsFiddle 上不起作用，因为您使用的是 .serialize()，它通过 URL 发送信息，作为 GET 类型，您需要将其作为 POST 发送。没关系。如果您已经准备好您的服务器以接收GET 方法，那么它将起作用。

另外，我必须补充一点，如果你想改变颜色 ONLY 如果 AJAX 成功，你必须添加你的改变颜色功能，就像我在演示中使用的那样，如果你想检查你的日期每次要向服务器发送信息时，将.one() 函数更改为.on() 函数并在AJAX 成功后删除该函数：

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

（关于删除函数的更多信息here）；

我希望这至少可以帮助您实现您想要的方式。如果不是您想要的，请发表评论。

Answer 2

我不确定我是否完全理解了这个问题，但是..你可以检查一下>>

Fiddle Demo

HTML

将 ID 添加到日期字段，如

 <input id="until" type="date" name="until_date" value="Until date">
 <input id="since" type="date" name="since_date" value="Since date">

只是为了突出显示所需的日期>>

CSS

.req{
   border:2px red solid;
}
.required{
   color:red;
   font-size: 0.8em;
   font-style:italic;
}

jQuery

$(function () {
     //removing the highlighting class on change
      $('#until').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });
      $('#since').change(function() {
         $(this).removeClass('req').next('.required').remove();
      });

    $('#accmenu').change(function() {
      var dSince= $('#since').val();
      var dUntil= $('#until').val();
      if(dSince=='' || dUntil==''){
         alert('You MUST select Both dates!');
         $(this).val(0); // Set the menu to the default 
         //Adding the Highlight and focus
         if(dSince==''){
             $('#since').addClass('req').after('<span class="required">- required *</span>').focus();}
         if(dUntil==''){
             $('#until').addClass('req').after('<span class="required">- required *</span>').focus();}           
      }else{
         $(".insightsgraphs div").hide();
         $(".insightsoptions input").removeClass("green");
         $("#newLikes").one('click', function () {
             $("#dailyNewLikes").html('</p>Test daily new likes</p>');
             return false;
          });
         $("#unlikes").one('click', function () {
              $("#dailyUnlikes").html('</p>Test daily unlikes</p>');
             return false;
         });
       }  //End of the if statement
   });
   $("#newLikes").on('click', function(){
      $(this).toggleClass('green');
      $('#dailyNewLikes').toggle();
      return false;
   });
   $("#unlikes").on('click', function(){
         $(this).toggleClass('green');
      $('#dailyUnlikes').toggle();
      return false;
   });

});

因此，无论何时选择accmenu 中的一个选项，它都会检查两个DATEs 的值，如果两者或任何一个都为空，则不会执行该函数。