2つの入力ボックスがjqueryに値で入力されているかどうかを確認する方法は？

jqueryの2つの入力テキストボックスに入力された値を表示するためのコードを記述しました。テキストボックスに値が入力されているかどうかを確認する方法は？私は変更機能を使って、html内に表示されるテキスト入力ボックスから入力された値を表示しました。入力ボックスがjqueryの値で満たされているかどうかを確認したいと思います。それを確認する方法は？私は値が入力されたときだけチェックしました。2つの入力ボックスがjqueryに値で入力されているかどうかを確認する方法は？

Javscript：

<script type="text/javascript"> 

    $(document).ready(function(){ 

    $("input").change(function(){ 

    var startDate = $("#start-date").val(); 
    var endDate = $("#end-date").val(); 

    $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate); 

    }); 
    }); 

    </script>

HTML：

<input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span> 

<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span>

出典

2016-07-20 anna sujith

。 ifステートメント内で、空であることを示すメッセージを表示することができます。 –

長さを確認しますか？ – epascarello

使用input代わりchange

$("input").on('input',function(){ 

var startDate = $("#start-date").val(); 
var endDate = $("#end-date").val(); 

$(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate); 

});

のがここです

出典

2016-07-20 12:59:48

'keyup'を使用できますか？ –

罰金があってもコンテンツを貼り付けるとうまくいかない場合 –

私はあなたの答えを 'keyup'で試してみました。働いています!!' input'と 'keyup'の違いを教えてください –

var startDate = $("#start-date").val(); 
var endDate = $("#end-date").val();

値が空であるかどうか、あなたが直接確認することができますので、もしあなたが使用することができます

if((startDate =="")||(endDate == "")) 
{ 

alert("Please Fill both text Boxes") 
}

出典

2016-07-20 13:00:45

このコードスニペットは質問を解決するかもしれませんが[説明を含む]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）あなたの投稿の質を向上させる。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。また、コードと説明の両方の可読性が低下するため、説明的なコメントを使用してコードを混乱させないようにしてください。 – FrankerZ

よろしくお願い致します！追加した –

以下のような比較を使用して、変数にテキスト入力の値を格納しているので、変数が空であるかどうかをチェックする条件。詳細は以下のコードを参照してください。

<script type="text/javascript"> 

$(document).ready(function(){ 

    $("input").change(function(){ 

     var startDate = $("#start-date").val(); 
     var endDate = $("#end-date").val(); 

     if($.trim(startDate) == ""){ 
      alert("Please enter start date."); 
     }else if($.trim(endDate) == ""){ 
      alert("Please enter end date."); 
     }else { 
      $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate); 

      }); 
     } 
    }); 
}); 

</script>

出典

2016-07-20 13:02:45

このコードは、入力された日付を送信するための送信ボタンがない場合に発生します。 –

このコードは、入力フィールドを変更してからぼかし、入力フィールドに値を貼り付けるときにも実行されます。このコードを実行するためにボタンを送信する必要はありません。 –

テキストボックスに値を入力しない場合は、特定の入力フィールドを入力するメッセージが表示されます。 –

これを試してみてください：

<script type="text/javascript"> 
 

 
\t $(document).ready(function(){ 
 

 
\t \t $("input").on('input keyup',function(){ 
 

 
\t \t \t var startDate = $("#start-date").val(); 
 
\t \t \t var endDate = $("#end-date").val(); 
 
\t \t 
 
\t \t \t $("#result").html("Rental Date<span> From:"+startDate+" To:"+endDate); 
 

 
\t \t }); 
 
\t }); 
 

 
</script>

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <input type="text" id="start-date" name="start" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-depart"></span> 
 

 
<input type="text" id="end-date" name="end" placeholder="Select Date" data-date-format="DD, MM d" class="input-sm form-control"/><span class="date-text date-return"></span> 
 

 

 
<div id="result"></div> 
 
</body> 
 

 
</html>

出典

2016-07-20 13:11:18

ほとんどの最も簡単な方法は、正規表現を使用することです。また、入力値をすぐに表示したい場合は、keyupの代わりにchangeと考えると、フィールドのフォーカスが失われた後にのみ変更イベントが発生します。だから、
、これは、あなたのJSのように見ているかもしれない言った：あなたがもし（たstartDate == "" ||たstartDate == nullの）の線に沿って各変数のif文を追加する必要があります

$(document).ready(function(){ 

     $("input").keyup(function(){ 

     var startDate = $("#start-date").val(); 
     var endDate = $("#end-date").val(); 
     var regexp = new new RegExp("\\d\\d, \\d\\d \\d"); // based on data-date-format atribute of input fields 

     if(!regexp.test(startDate)){ 
     alert("Please enter start date."); 
     } else if(!regexp.test(endDate)){ 
     alert("Please enter end date."); 
     } else { 
     $(".rentdate").html("Rental Date<span> From:"+startDate+" To:"+endDate); 
     } 
    }); 
    });

出典

2016-07-20 13:25:04

しかし、Datepickerやその他のカレンダーUIを使用している場合、イベント 'change'は正しく、そうでなければカレンダープラグインの参照を参照してください。 –

2つの入力ボックスがjqueryに値で入力されているかどうかを確認する方法は？

答えて

関連する問題