jquery validate using multiple variable

Question

I have 3 variable in my html:

Start Date (text input)

<input size="16" name="start_date" type="text"  class="m-wrap">

End Date (text input)

<input size="16" name="end_date" type="text"  class="m-wrap">

Frequency (dropdown)

<select class="span3 chosen" name="summarize" tabindex="1">
   <option value="1">15 minutes</option>
   <option value="2">30 minutes</option>
   <option value="3">1 hour</option>
   <option value="4">3 hours</option>
</select>

I would like to have validation input between 3 variable using jquery that, if diff(start_date and end_date) > 3 month, summarize can be used only value >= 1 hour (value 3 and 4). All this variable in id=Form_1.

How can i make this validation ? Any sample code will be appreciated.

I'd suggest using this plugin with a custom validation rule. http://jqueryvalidation.org/ — CharliePrynn, Aug 06 '13 at 10:29
Your last part is very unclear. and @CharliePrynn I dont think the this plugin can do that specific task.. — Royi Namir, Aug 06 '13 at 10:42
The plugin accepts custom methods (Rules). The function would just return true/false depending on the outcome of the date comparison. — CharliePrynn, Aug 06 '13 at 10:44
@RoyiNamir during form submit, i want to check input of start_date, end_date and summarize, if difference between start_date and end_date >= 3 month, then value of summarize should be >= 1 hour — Frans, Aug 06 '13 at 10:47
@CharliePrynn this plugin wont write things for him , he still need to write JS.he's asking about the core js logic — Royi Namir, Aug 06 '13 at 10:49

score 0 · Answer 1 · edited May 23 '17 at 11:50

$(function () {

    $('input[name="start_date"], input[name="end_date"]')
    .change(function () {

        // check that both dates are populated and valid, if not than return

        // if the difference between the start date and the end date is more than
        // three months, than hide options less than an hour, otherwise return
        $('select[name="summarize"] > option:lt(2)').hide();

    });

});

Detecting an "invalid date" Date instance in JavaScript

Get difference between 2 dates in javascript?

score 0 · Answer 2 · answered Aug 06 '13 at 13:09

0

Try jQuery UI Validation. Here you can easily define custom rules validation and then assign to a input field. Let me know if you face any issue.

answered Aug 06 '13 at 13:09

Deepak Biswal

4,280
2
20
37

score 0 · Accepted Answer · answered Aug 06 '13 at 14:02

I assume you are using jQuery validation plugin. If not, the logic can still be used. I admit it's very crude. Add the following method to additional-methods.js. This file comes along with jquery.validate.js.

jQuery.validator.addMethod("frequency", function(value, element) {
  var startdate = Date.parse($('input[name="start_date"]').val();
  var enddate = Date.parse($('input[name="end_date"]').val();
  difference = enddate-startdate;
  if(difference>7776000){
    if(value>2)
      return true;
    else
      return false;
  }
  else
    return true;
}, "Enter a higher frequency");

Now add the class frequency to your frequency select box. Don't forget to include additional-methods.js file in your html. This adds a new custom rule for validation. Feel free to tinker.

jquery validate using multiple variable

3 Answers3