验证jquery

时间:2017-05-25 09:11:46

标签: jquery html validation timepicker

I have made a JSFIDDLE link for reference here. 点击“下一步”按钮开始验证开始和结束时间,该按钮位于同一页面上。我想验证动态创建的字段的开始和结束时间为 - >开始时间应小于结束时间。我创建了一个数组,然后使用if循环检查时间。我在这里粘贴了下面的代码。但是,当选择的开始时间是上午8:30,结束时间是上午10点时,验证失败。我无法理解为什么会这样。请帮忙。

<td data-name="sub_event_stime[]" >

<input type="text" placeholder="Enter time" name="sub_event_stime[]" class="span11 timepicker sub_event_stime" style="background-color: #FFF;margin-top: 3%;height: 37px;width: 69%;text-align: center;">                       
<br/>    
</td>

<td data-name="sub_event_etime[]" >


<input type="text" name="sub_event_etime[]"  placeholder="Enter time" class="span11 timepicker sub_event_etime" style="background-color: #FFF;margin-top: 3%;height: 37px;width: 69%;text-align: center;">

<br/>    

</td>

<td data-name="sub_event_venue[]" >

<input type="text" name='sub_event_venue[]'  
placeholder='Venue' class="form-control sub_event_venue" style="text-
align:center;margin-left:16%;margin-top:10px;height: 29px;width: 
68.4%;padding:17px;   "/>

</td>

Jquery代码

$('#next_button').click(function(e) {

     var stime = [];
     $.each($('.sub_event_stime'), function (i, item) 
     {
        var val = $(this).val(); 
        stime.push( val );
     });

     var etime = [];
     $.each($('.sub_event_etime'), function (i, item) 
     {
        var val = $(this).val(); 
        etime.push( val );

     });


     var venue = [];
     $.each($('.sub_event_venue'), function (i, item) 
     {
        var val = $(this).val(); 
        venue.push( val );

     });

        for(var i=0; i < venue.length; i++) 
        {
            for(var j=i+1; j < venue.length; j++) 
            {
                if(venue[i] == venue[j] && venue[i] !=  "" && venue[j] != "" && stime[i] == stime[j] && etime[i] != "" && etime[j] != "" && stime[i]!= '' )
                {

                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(j).val('');
                    $('.sub_event_etime').eq(j).val('');
                    $('.sub_event_venue').eq(j).val('');
                    alert("Same time and same venue not allowed");
                    $(this).attr('type','submit');
                    return false;

                }
                else if(stime[i] > etime[i] && stime[i] != '' && etime[i] !== '')
                {

                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(j).val('');
                    $('.sub_event_etime').eq(j).val('');
                    $('.sub_event_venue').eq(j).val('');
                    alert("Start time should be smaller than end time"); 
                    $(this).attr('type','submit');
                    return false;   
                } 
                else if((stime[i] == etime[i]) && (stime[j] == '' ) && (etime[j] == ''))
                {

                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(i).val('');
                    $('.sub_event_etime').eq(i).val('');
                    $('.sub_event_venue').eq(i).val('');

                    alert("Start time and end time cannot be same"); 
                    $(this).attr('type','submit');
                    return false;   
                }
                else if((stime[j] == etime[j]) && (stime[i] == '') && (etime[i] == ''))
                {

                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(j).val('');
                    $('.sub_event_etime').eq(j).val('');
                    $('.sub_event_venue').eq(j).val('');
                    alert("Start time and end time cannot be same"); 
                    $(this).attr('type','submit');
                    return false;   
                }
                else if(etime[j] < etime[i] && venue[i] == venue[j] && etime[j] != '' && etime[i] != '')
                {

                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(j).val('');
                    $('.sub_event_etime').eq(j).val('');
                    $('.sub_event_venue').eq(j).val('');
                    alert("This range has already been used");  
                    $(this).attr('type','submit');
                    return false;   
                }
                else if(stime[j] > stime[i] && venue[i] == venue[j] && stime[j] != '' && stime[i] != '')
                {
                    console.log(venue);
                    console.log(stime);
                    console.log(etime);

                    $('.sub_event_stime').eq(j).val('');
                    $('.sub_event_etime').eq(j).val('');
                    $('.sub_event_venue').eq(j).val('');
                    alert("This range has already been used");  
                    $(this).attr('type','submit');
                    return false;

                }



            }
        }




});

1 个答案:

答案 0 :(得分:0)

你的问题在这里:

 (etime[j] < etime[i] && venue[i] == venue[j] && etime[j] != '' && etime[i] != '')

这些都是字符串。不应该使用&lt; &GT;运算符。

w3schools

  

比较两个字符串时,“2”将大于“12”,因为   (按字母顺序)1小于2.

     

空字符串转换为0,而非数字字符串转换为NaN   这总是错误的。

     

为确保正确的结果,应将变量转换为正确的结果   在比较之前输入。