The rules for each field are updated every time a row is added or removed. They have to be updated like that otherwise removed rows will cause errors, and added rows won't have any rules.
You will want to use the required rule to always be true on the start and end fields.
You will also want to use range rule, to specify the max/min for the start and end fields.
The scripting gets tricky, but with enough functions to help simplify things, it can be relatively straight-forward.
The minimum value of a start field is obtained by adding one to the previous end value. If that previous value isn't found, we could use 0 as a default minimum.
Code javascript:var min = previousEndField(this).val() + 1 || 0;
The maximum value of the start field is, well ... is it possible to start and end on the same number? If so, we can say the maximum value value is that of the end value from the same row. If that end field is not found, we can set just set it as the maximum number allowed, which is stored in Number.MAX_VALUE
Code javascript:var max = nextEndField(this).val() || Number.MAX_VALUE;
You could then set the range with this:
Code javascript:$(this).rules('add', { number: true, range: [min, max] });
The end fields would have their min/max set in a similar manner.
Then it's just a matter of coming up with code for these functions:
- previousEndField()
- nextEndField()
- previousStartField()
- nextStartField()
You will also want to update those rules whenever one of the start or end numbers changes. If an end rule is reduced, you do need the next start rule to also decrease.
An easy way to achieve that is to put the setup code for these rules in a separate function called setupStartAndEndRules(form), so that you can call it from both the setupMultipleRowValidation function, as well as from a change event on the fields themself.






Reply With Quote
Bookmarks