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); 

並檢查是否正確讓你的價值。

UPDATE

我不知道，如果你想這個（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"> 

只是爲了突出顯示所需的dat ES >>

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一個選項被選中，它會檢查兩個值DATE s，如果兩者或任何是空白的，它不會執行可愛的功能。