如何验证具有时间值的动态创建的文本框答案

【问题标题】：how to validate dynamically created textbox which have the time value如何验证具有时间值的动态创建的文本框
【发布时间】：2015-12-04 15:40:41
【问题描述】：

我被困在这个我想很容易的问题上，问题是验证动态创建的文本框值，从我写的第一个文本框从值01:00 到值03:00，在我写的第二个文本框中值作为 '02:00' 到 '04:00' 所以我想验证这个，当我点击验证按钮时它应该限制它，因为这个值（“02:00”-“04:00”）正在进来在 ("01:00-03:00") 之间，所以它应该在其他新创建的动态文本框上进行验证和验证

------------------------------------------------------------
|from 01:00                    to 03:00 

|from 02:00                    to 04:00  **restriction**

|from 03:00                    to  05:00 right value(validated)
......
....
--------------------------------------------------------------

这是我创建动态复选框和检查的代码 jQuery 添加/删除文本框示例

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>From'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >'+'<label>To'+ counter + ' : </label>' +
          '<input type="text" name="totime' + counter + 
          '" id="totime' + counter + '" value="" >');
            newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
        var $textbox='';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
     $("#validate").click(function () {


            msg=$('#textbox' + 1).val();
                   $textbox1= $('#textbox1').val();
        $totime=  $('#totime1').val();
         $textbox2= $('#textbox2').val();


        if($textbox2>=$textbox1&&$textbox2<=$totime)
          {
              alert("true");
          }
          else
          {
           alert("false");
       }


     });
  });
</script>
</head>
<body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>From : </label><input type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
    </div>

</div>



<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type='button' value='Validate' id='validate'>

</body>
</html>

【问题讨论】：

标签： javascript php jquery validation

【解决方案1】：

你应该试试这个代码

    <html>
        <head>
            <title>jQuery add / remove textbox example</title>

            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>

            <style type="text/css">
                div{
                    padding:8px;
                }
            </style>

        </head>

        <body>

            <h1>jQuery add / remove textbox example</h1>

            <script type="text/javascript">

                $(document).ready(function () {

                    var counter = 2;

                    $("#addButton").click(function () {

                        if (counter > 10) {
                            alert("Only 10 textboxes allow");
                            return false;
                        }

                        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter).attr("class", 'time');

                        newTextBoxDiv.after().html('<label>From' + counter + ' : </label>' +
                                '<input type="text" name="textbox' + counter +
                                '" id="textbox' + counter + '" value="" >' + '<label>To' + counter + ' : </label>' +
                                '<input type="text" name="totime' + counter +
                                '" id="totime' + counter + '" value="" >');
                        newTextBoxDiv.appendTo("#TextBoxesGroup");


                        counter++;
                    });

                    $("#removeButton").click(function () {
                        if (counter == 1) {
                            alert("No more textbox to remove");
                            return false;
                        }

                        counter--;

                        $("#TextBoxDiv" + counter).remove();

                    });

                    $("#getButtonValue").click(function () {

                        var msg = '';
                        var $textbox = '';
                        for (i = 1; i < counter; i++) {
                            msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
                        }
                        alert(msg);
                    });
                    $("#validate").click(function () {
                        $i = 1;
                        $('.time').each(function () {

                            //alert('i='+$i);

                            $txtval = $('#TextBoxDiv' + $i).find('#textbox' + $i).val();
                            val= ($i + 1);
                            for ($j = val; $j >= 0; $j--)
                            {

                               // alert('asdads='+$j);
                                if ($txtval > $('#TextBoxDiv' + ($i - $j)).find('#textbox' + ($i - $j)).val() && $txtval < $('#TextBoxDiv' + ($i - 1)).find('#totime' + ($i - 1)).val())
                                {
                                    $('#TextBoxDiv' + $i).find('#textbox' + $i).val("");
                                    alert('restriction');

                                }
                            }
                            $i++;
                        });

                    });
                });
            </script>
        </head>
    <body>

        <div id='TextBoxesGroup'>
            <div id="TextBoxDiv1" class="time"> 
                <label>From : </label><input  type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
            </div>

        </div>



        <input type='button' value='Add Button' id='addButton'>
        <input type='button' value='Remove Button' id='removeButton'>
        <input type='button' value='Get TextBox Value' id='getButtonValue'>
        <input type='button' value='Validate' id='validate'>

    </body>
    </html>

【讨论】：