Javascript JQuery日期输入条件

我拥有以下正常工作的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（）

函数。例如，当我在没有日期输入的情况下单击其中一个按钮时，我希望收到一个类似于

警报（“一个日期或两个日期都缺失”）

的警报，例如，在我选择日期后，再次按下按钮以执行上述示例中的

.one（）

功能。我希望我说得够清楚。我知道我可以使用类似于：

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

但到目前为止，我的尝试没有成功。可能我没有把条件放在应该的地方。。。也可以通过警报来聚焦、突出显示或类似的输入

编辑： 这里有一把小提琴：

---

我将ajax调用替换为其他调用，而无需修改流。

尝试使用以下内容检查您的值：

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

我建议您检查输入中的

name

属性，并检查它是否与检索输入值时使用的属性相同

如果仍不起作用，请尝试一些“调试”，如：

console.log(since);

并检查它是否正确获取您的值

更新

我不知道你是否想要这个（）。如果您的日期为空，它将不起作用。AJAX调用在JSFIDLE上不起作用，因为您使用的是

.serialize（）

，它通过URL以

GET

类型发送信息，您需要以

POST

的形式发送。没关系。如果您已经准备好让服务器接收

GET

方法，那么它将工作

另外，我必须补充一点，如果您只想更改颜色如果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');

（有关删除函数的详细信息）

---

我希望这将帮助你至少在你想做的方式。如果不是你想要的，请留下评论。

我不确定我是否完全理解了这个问题，但是。。您可以查看此>>

HTML

向日期字段添加ID，如

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

jQuery

$（函数（）{
//删除更改时的突出显示类
$（'#until'）。更改（函数（）{
$（this.removeClass（'req'）.next（'.required'）.remove（）；
});
$（'#自'）.change（function（）{
$（this.removeClass（'req'）.next（'.required'）.remove（）；
});
$（'#accmenu'）。更改（函数（）{
var dSince=$（“#自”）.val（）；
var dUntil=$（'#until'）.val（）；
如果（dSince=''| | dUntil=''）{
警报（'必须同时选择两个日期！'）；
$（this.val（0）；//将菜单设置为默认值
//添加亮点和焦点
如果（dSince==''）{
$（'#因为'）.addClass（'req'）。在（'-required*'）之后。focus（）；}
如果（dUntil==''）{
$（'#until'）.addClass（'req'）.after（'-required*'）.focus（）；}
}否则{
$（“.insightsgraphs div”）.hide（）；
$（“.insightsoptions输入”）.removeClass（“绿色”）；
$（“#newLikes”）.one（'click'，function（）{
$（“#dailyNewLikes”）.html（“
测试每日新喜好”
”）；
返回false；
});
$（“#不相似”）.one（'click'，function（）{
$（“#dailyUnlikes”）.html（“
测试每日的unlikes
”）；
返回false；
});
}//if语句的结尾
});
$（“#newLikes”）。在（'click'，function（）上{
$（this.toggleClass（'green'）；
$（'dailyNewLikes'）.toggle（）；
返回false；
});
$（“#unlikes”）。在（'click'，function（）上{
$（this.toggleClass（'green'）；
$（“#dailyUnlikes”）.toggle（）；
返回false；
});
});

---

因此，每当从

accmenu

中选择一个选项时，它将检查两个

DATE

s的值，如果这两个或任何一个都为空，它将不会执行该函数。

应该可以，您可以提供一个演示吗？您是否尝试了

if（until.trim（）.length==0 | since.trim（）.length==0）

？问题不在于if语句，而在于将它放在何处，因为如果我将它放在ajax调用之前，如果输入丢失，它将执行

.one（）

，而不执行get请求，第二次按下按钮时，它将不再发出请求，因为

.one（）

已经执行过一次。我可能需要一个reset

.one（）

计数器之类的东西？@DanielacostinaVaduva在调用ajax之前，您必须将它放在每个

onclick

函数中。如果长度为0，则

alert（…）

else

ajax（{…}）

。这就是您要问的吗？您可以使用

.on（）

而不是

.one（）

，然后在验证和

数据成功发送后，使用
.off（）
解除事件绑定。
.req{
   border:2px red solid;
}
.required{
   color:red;
   font-size: 0.8em;
   font-style:italic;
}

$(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;
   });

});