当我选择一个日期时，daterangepicker会触发验证

I'm using jquery validation with daterangepicker. I have an issue when I try to choose a date. When I choose it for the first time, it doesn't show "Hello" but the second time it shows "Hello" and what I really want to do is validate this field when I click on button next. How can I do to avoid that "checkDate" being executed when I pick up a date in order to validate it when I click on button next?

我在daterangepicker上使用jquery验证。我在选择约会对象时遇到了一个问题。当我第一次选择它时，它不会显示“Hello”，而是第二次显示“Hello”，当我点击next按钮时，我真正想做的是验证这个字段。我如何避免在选择日期时执行“checkDate”，以便在单击next时验证它?

Here you can see my code:

在这里你可以看到我的代码:

$("#form_step1").validate({
    rules: {
        titulo: {
          required: true,
          maxlength: 300
        },
        reservationtime1:  {
          required: true,
          checkDate: true
        }
    },
    messages: {
        titulo: "At least 300 characters",
        reservationtime1: "You must pick up a valid date"
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }    
});  
jQuery.validator.addMethod("checkDate", function(value, element) { 
// My custom validation
alert("Hello");
});

http://jsfiddle.net/B79z7/2/

Thanks

谢谢

2 个解决方案

#1

Try adding onfocusout:false, to your validation options.

尝试在验证选项中添加onfocusout:false。

$("#form_step1").validate({
    onfocusout:false,
    rules: {
        titulo: {
          required: true,
          maxlength: 300
        },
        reservationtime1:  {
          required: true,
          checkDate: true
        }
    },
    //....
});

That seemed to limit the calls to CheckDate to only when the Next button was clicked: http://jsfiddle.net/ryleyb/B79z7/7/

这似乎限制了对CheckDate的调用，只在单击Next按钮时调用:http://jsfiddle.net/ryleyb/B79z7/7/

#2

Form validation won't work until you update values on input elements if you want to make it work give some default value to daterange input.

除非更新输入元素上的值，否则表单验证无法工作，如果您想让它工作，请为daterange输入提供一些默认值。

DEMO

演示

  <input type="text" value="Enter the date " name="reservationtime1" id="reservationtime1" 
                        class="form-control" readonly="readonly"/>

UPDATE : Sorry I misunderstood the issue, if that's the case then move the validate() inside the #next.click method as #next is a anchor and there is no submit button, so as apply button click form validation methods got called.

更新:对不起，我误解了这个问题，如果是这样，那么将validate()移动到#next中。单击方法，因为#next是一个锚，并且没有提交按钮，所以as应用按钮单击表单验证方法被调用。

DEMO 2

演示2

#1