如果不满足条件,阻止parleyjs继续执行多个步骤

时间:2019-03-08 16:47:15

标签: javascript

我正在使用parsleyjs来验证表单,并且正在使用http://parsleyjs.org/doc/examples/multisteps.html中的“多步骤”脚本。

所有功能都可以很好地发挥作用,但是如果结束日期小于开始日期,我会重置一组字段(datetimepicker)。

它的作用只是显示警报,并在用户单击“下一步”时清除该字段。

我认为,清除这些字段后,由于必填字段,因此该表单不会继续进行,但会继续下一页。如果我返回,然后再下一次,那么它可以防止出现预期的情况。就像点击胜过了文本框清除一样。

这是我在第2步中的示例,如果您添加的开始日期少于结束日期

https://www.blinn.edu/expansion/facilities-listing/form-2-a.HTML

和代码:

 // raul - 3-8-2019 - created a javascript to compare dates and pass them to the HTML file. this method had to be done this way becasue the Velocity file was converting the > sign into HTML entities
	
	//var startDate = "03/13/2019 9:39 AM"; //$(".datetimepicker1 input").val();
	var startDate = $(".datetimepicker1 input").val();

    var start_date = new Date(startDate);

	//var endDate = "03/13/2019 9:40 AM"; //$(".datetimepicker2 input").val();
	var endDate = $(".datetimepicker2 input").val();
		
	var end_date = new Date(endDate);
	
	//sample1 Fri Mar 08 2019 09:48:16 GMT-0600 (Central Standard Time)
	//sample2 Wed Mar 13 2019 09:40:00 GMT-0500 (Central Daylight Time)
	
	
   return compDate();
   
   
       function compDate() { 

            if (end_date >= start_date) {
            		 
            		//$('.form-control, .submit').attr('disabled', 'disabled'); //Disable   
            	 	//alert(end_date + " is greater than " + start_date);
                    
             }
            	else if (end_date < start_date){
            		
            		//$('.form-control, .submit').removeAttr('disabled'); //enable
                    alert(end_date + " is less than " + start_date);
                    $(".datetimepicker1 input").val(""); // reset the datetimepicker
                    $(".datetimepicker2 input").val(""); // reset the datetimepicker 
                    e.preventDefault();
                    return false;
                    
             }
             
             else {
                 
                    $('.form-control, .submit').removeAttr('disabled'); //enable
                    //alert("no condition met");
             }
         
    }
// raul - 3-8-2019 - created a javascript to compare dates and pass them to the HTML file. this method had to be done this way becasue the Velocity file was converting the > sign into HTML entities

1 个答案:

答案 0 :(得分:0)

更新:

我必须将所有代码放在“多步”脚本之前的函数中,然后在上一个/下一个脚本发生之前调用它。这不是最好的解决方案,但目前可以使用。仍然希望找到更优雅的解决方案

$('.form-navigation .previous').click(function() {
/////////////added function here to call it before the "previous" occurred
    navigateTo(curIndex() - 1);
  });


  $('.form-navigation .next').click(function() {
/////////////added function here to call it before the "next" occurred

    $('.demo-form').parsley().whenValidate({
      group: 'block-' + curIndex()
    }).done(function() {
      navigateTo(curIndex() + 1);
    });
  });