2013-05-09 81 views
1

我有以下的HTML表單:如何檢查輸入型日期爲空或不使用JavaScript或jQuery的

<form id="ChartsForm"> 
    <div id="dateoptions"> 
     <p>Until date: <input type="date" name="until_date" value="Until date"></p> 
     <p>Since date: <input type="date" name="since_date" value="Since date"></p> 
    </div> 
    <div class="insightsoptions"> 
     <input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes"> 
     <input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes"> 
    </div> 
</form> 

和下面的jQuery腳本:

$(function() { 
    $("#newLikes").one('click', function() { 
     $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success: 
      function(response) { 
       alert(response); 
       $("#dailyNewLikes").html(response); 
      }}); 
     return false; 
    }); 
    $("#newLikes").on('click', function(){ 
     $(this).toggleClass('green'); 
     $('#dailyNewLikes').toggle(); 
    }); 

如何檢查輸入「until_date」和「since_date」是空的或不在第一位,如果它們是空的以在執行ajax調用之前停止腳本,則提醒用戶關於錯誤,然後在輸入不再爲空時繼續。我必須使用.one()。我試過了。 blur()功能,但不起作用...

回答

4

而不是使用one()成功後,您可以刪除處理程序。如果你只需要刪除一個函數,你可以使用namespaced events(或者一個命名函數而不是匿名函數)。你可以做這樣的事情:

$("#newLikes").on('click', function() { 

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

    if (until == "" || since == "") { 
     alert('Error; until date or since date is missing.'); 
     return; 
    } 

    $.ajax({ 
     type:'GET', 
     url: 'newLikes.php', 
     data: $('#ChartsForm').serialize(), 
     success: function(response) { 
      $("#dailyNewLikes").html(response); 
      $("#newLikes").off('click'); 
     } 
    }); 
}); 
1
<script type="text/javascript"> 
if (document.forms["form_name"]["date_field_name"].value == "" || document.forms["form_name"]["date_field_name"].value == "1970-01-01") 
{ 
     alert('you missed to give date.'); 
     return false; 
} 
</script> 

在這種情況下,你需要提供一個名稱的形式

0

終於得到它

 
 
$(function() { 
 
    $("input[name^=datepicker]").datepicker({ 
 
    onSelect: function(dateText, inst) { 
 
if ($("input[name='datepicker_end']").val()!=""){  
 
if($("input[name='datepicker']").val()>$("input[name='datepicker_end']").val()){ 
 
alert("invalid date"); 
 

 
} 
 

 
    } 
 

 
} 
 

 
}); 
 

 
})
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Datepicker - Restrict date range</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
</head> 
 
<body> 
 
    
 
<p>Date: <input type="text" id="datepicker" name="datepicker"></p> 
 
    
 
<p>Date: <input type="text" id="datepicker_end" name="datepicker_end"></p> 
 

 
</body> 
 
</html>

相關問題