I'm using Jörn Zaefferer's jQuery validation plugin alongside the jQuery UI datepicker. I've created a set of custom rules for validating that a start date is prior to an end date.
The issue I have is that when I have an invalid range and use the datepicker UI to change a date to make the range valid, I see the validation running with the old values (and thus keeping the fields invalidated) prior to the onSelect callback firing for the datepicker.
I would expect that the datepicker would update the input's value when the user selects, and that any validation code would run when that happens and see the new value. But that doesn't seem to happen.
I've tried initializing the datepicker before initializing validation in hopes that the order the events were wired in would make the difference, but you can see it hasn't helped.
Here's the fiddle
To reproduce the issue, enter the 15th of a given month in the start, and the 7th of the same month in the end. Click the start field and then click or tab out to trigger validation. The fields correctly invalidate. Now click the start field and select the 1st of the same month. Note what's output at this point on the console.
The code, for reference:
HTML
<form id="daterange-form">
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="text" id="startDate" name="startDate" class="validDate form-control" />
</div>
<div class="form-group">
<label for="endDate">End Date</label>
<input type="text" id="endDate" name="endDate" class="validDate form-control" />
</div>
<button type="submit" class="btn">Submit</button>
</form>
JavaScript
// Custom Rules
$.validator.addMethod('dateBefore', function(value, element, params) {
// if end date is valid, validate it as well
console.log('dateBefore', value, element, params)
var end = $(params);
if (!end.data('validation.running')) {
$(element).data('validation.running', true);
// The validator internally keeps track of which element is being validated currently. This ensures that validating 'end' will not trample 'start'
// see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
setTimeout($.proxy(
function() {
this.element(end);
}, this), 0);
// Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
setTimeout(function(){
$(element).data('validation.running', false);
}, 0);
}
return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());
}, 'Must be before its end date');
$.validator.addMethod('dateAfter', function(value, element, params) {
// if start date is valid, validate it as well
console.log('dateAfter', value, element, params)
var start = $(params);
if (!start.data('validation.running')) {
$(element).data('validation.running', true);
// The validator internally keeps track of which element is being validated currently. This ensures that validating 'end' will not trample 'start'
// see http://stackoverflow.com/questions/22107742/jquery-validation-date-range-issue
setTimeout($.proxy(
function() {
this.element(start);
}, this), 0);
// Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
setTimeout(function() {
$(element).data('validation.running', false);
}, 0);
}
return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());
}, 'Must be after its start date');
// Code setting up datepicker and validation
$('#startDate, #endDate').datepicker({
onSelect: function(dateText, inst) {
console.log('onSelect', dateText, inst)
}
});
$('#daterange-form').validate({
debug: true,
rules: {
startDate: {dateBefore: '#endDate'},
endDate: {dateAfter: '#startDate'}
}
});
Side note: the timeouts and proxy calls in the rules are because this version of the library internally assumes serial validation. If you try to validate another field in the middle of a rule, Bad Things happen. The validation.running semaphore code is to prevent infinite looping.
I've tried initializing the datepicker before initializing validation in hopes that the order the events were wired in would make the difference, but you can see it hasn't helped.
The order should/would not matter, because as you know, it's only the initialization, not the implementation.
I would expect that the datepicker would update the input's value when the user selects, and that any validation code would run when that happens and see the new value. But that doesn't seem to happen.
The date-picker does indeed update the input value, however validation is not triggered because that's not a normal event the validation plugin is expecting. Validation is only triggered on the submit, keyup and focusout events, none of which happen when using .datepicker().
So you can programmatically force a validation test using the .valid() method whenever you wish...
$('#startDate, #endDate').datepicker({
onSelect: function(dateText, inst) {
$(this).valid();
}
});
DEMO: jsfiddle.net/nkvpsumq/2/
.valid() can be attached to an individual input, select, textarea, or an entire form. When attaching to a selector that contains more than one object, you must enclose this method using a jQuery .each(). In your case, the .each() is not needed because you're already programmatically re-triggering validation on the opposing field using this.element() within your custom rules. Now that you know about triggering the .valid() method via a .datepicker() event, you may wish to refactor the rest of your code a bit.
Here's the code I ended up using to solve the issue and keep it DRY.
$.datepicker._selectDate_super = $.datepicker._selectDate;
$.datepicker._selectDate = function(id, dateStr) {
$.datepicker._selectDate_super(id, dateStr);
$(id).valid();
};
(or if you prefer es6 and ASI ;)
$.datepicker._selectDate_super = $.datepicker._selectDate
$.datepicker._selectDate = (id, dateStr) => {
$.datepicker._selectDate_super(id, dateStr)
$(id).valid()
}
Related
I am working on a large legacy Asp.Net webforms project. I have a field that hits our server to check for uniqueness on validation. Everything in this process is working except that the important field will validate on keyup after changing focus and then refocusing on the field. The field is a simple html input. I have tried setting onkeyup to false among other events. I have tried using a custom onkeyup. No matter what I try, the keyup validation keeps coming back.
The user will focus on the field and enter their data. During the initial entry, validation does not fire until focus changes. Then, when the user focuses on the field again, validation fires on every key up. I have to prevent this behavior to cut down on network traffic. Otherwise, I'd call it good and move on. Any advice is much appreciated. The following code is simplified from the project, but is still giving me the behavior mentioned. Please let me know if I can clarify anything.
jQuery v3.4.1
jQuery Validation Plugin - v1.19.0
<form id="form1" runat="server">
<div style="padding: 100px;">
<div class="control-group">
<label for="claimNumber" class="control-label" style="width: 200px;">Claim #*</label>
<div class="controls" style="margin-left:20px">
<input type="text" class="form-control span3" id="claimNumber" name="claimNumber" maxlength="128"/>
<button style="margin-left: 10px">Validate</button>
</div>
</div>
</div>
</form>
<script>
var isUsed;
var form = $("#form1").show();
var form1ValidationRules = {
rules: {
claimNumber: {
uniqueClaim: true,
required: true
}
}
};
var validateForm = function () {
$('input,select,textarea', 'div.hide').not('input[type=radio]').each(function () {
$(this).val('');
});
return $("#form1").validate(form1ValidationRules).form();
};
$(document).ready(function () {
$.validator.addMethod(
"uniqueClaim",
function () {
console.log("validating");
return (isUsed == false)
},
"Claim number is already in use for your company."
);
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
});
</script>
$('form#form1').validate(form1ValidationRules);
$('#myform').validate({
onkeyup: false
});
Where is $myform? That would be a form with id="myform". You seem to have attached .validate() to a form that does not exist in this code. This call would be ignored.
If it's supposed to be the same form and you fix the #myform selector, it still will not work because you've called .validate() twice on same form. This second call would be ignored.
If you're using Unobtrusive Validation plugin as part of your ASP project, then you're calling .validate() three times on the same form. The .validate() call automatically created by the Unobtrusive plugin is going to get called first and the others will be ignored.
The jQuery Validate plugin uses .validate() to initialize the plugin on your form ONE time. If .validate() is called multiple times, all subsequent calls will be ignored.
ASP users that have Unobtrusive in place typically use the .setDefaults() method to over-ride any jQuery Validate settings created by Unobtrusive. Keep in mind this would over-ride jQuery Validate settings for all forms on the page.
I have an input field with a custom validator and ng-messages to show validation messages.
<input type="tel"
ng-model="ctrl.phoneNumber"
phone-number
required />
The custom validator is simple:
ngModel.$validators.phoneNumber = () => {
return $iElem.intlTelInput('isValidNumber');
};
For some other events I'd like to trigger validation by hand, also simple
$iElem.on('countrychange', () => {
ngModel.$validate();
});
Which will trigger my custom validator and also this will validate the number again, the form.*.$error object will be updated too, but ngMessages won't reflect, the validation messages won't update somewhy :/
Any idea?
edit: when I go for the next input in the line ngMessages kicks in for that input AND for the phone-number input as well and the view gets updated, but it's late, like if it would omit one cycle to update the view
Since the countrychange event is not triggered by angular (i.e. outside the digest cycle) you'll need to wrap the validate call inside a $scope.$apply.
iElem.on('countrychange', () => {
$scope.$apply(function(){
ngModel.$validate();
})
});
See this discussion for an explanation
I've got simple date picker based on mootools (http://www.monkeyphysics.com/mootools/script/2/datepicker)
This is not jQuery datepicker, it's event triggers don't work.
I'd need to calculate days and other things once dates are picked, calculation works fine, I need it to fire after user decides to change dates, I've tried all event handlers I could find, they all work if you press enter or click another field, but it should recalculate right after clicking (picking) the date.
<input type="text" name="arrival" value="2016-10-05" title="" class="fromdate">
<input type="text" name="departure" value="2016-10-08" title="" class="todate">
<input type="text" name="addnight" value="" title="" class="calculated">
<script type="text/javascript">
$("select, input, .datepicker_dashboard").on("change paste keyup blur click mouseup hover focus focusout", function() {
var calculus = daydiff(parseDate($('.fromdate').val()), parseDate($('.todate').val()));
if (calculus<0) {var calculus=0;}
$(".calculated").val(calculus);
}
</script>
Reading the documentation (linked by yourself) tells me that you are able to set an onSelect handler in the options while creating the datepicker with new DatePicker(input-target-selector [, options-object]);
onSelect
Event hook triggered when a date is selected. (v1.16+: comes with 1
argument, a standard javascript Date object representing the selected
Date)
Try this. I got the answer from the link listed below
Trigger function when date is selected with jQuery UI datepicker
$("#dt").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
$("#start").val(date + time.toString(' HH:mm').toString());
}
});
Wondering if it's possible to set the focus for a select2 (v4.0) control when { tags: true } is used? I've tried $(element).focus(), $(element).trigger('click') and $(element).trigger('focus') to no avail.
... or ...
The reason I'm being forced to try and set focus is that it's lost when I unbind the change event, perform an action on the values and then rebind the change event. When I do that, which I need to do every time a new value is entered, I have to click back into the textbox to enter the next value. When I don't unbind, I can just continue to type a value, hit enter, type another value, hit enter and repeat which is the desired (default) behavior. Code I'm using:
element.off('change');
element.select2({
tags: true,
data: values
});
element.select2('val', values);
element.on('change', function (e) {
observable.multipleValuesChanged(e);
});
Maybe it's not possible or potentially a bug with select2.
How about this:
element.data('select2').$container.find('.select2-search__field').focus();
JsFiddle
I have the following:
<input type="text" name="field1" onblur="numericField(this);" />
But I also need to excecute numericField() for the element before the form is submitted.
I tried document.getElementById("Campo1").onblur() but it returns undefined. How can I do this?
First of all, binding events the way you do it is not a good idea. Instead, use element.addEventListener instead.
Guessing from your question you want to do a validation right before you submit the form. In this case you should write:
document.querySelector("form").addEventListener("submit",function(){
// validate your fields - basically run numericField() on both your input fields
// if your numericField correctly returns true or false, the submit element will
// be canceled if validation fails
return numericField(your_element);
});
If you really wont to emit the blur event on a specific element, you can do the following:
var el = document.querySelector("<select your element here>");
el.focus();
el.blur();
Also with HTML5 you can now do a direct validation of the imput field on blur with defining the type correctly (e.g. if it's a Number set the type to number) and/or the pattern attribute (Docs). Now the browser intrinsic validation directly triggers on blur.
If you need to do something before submit I suggest writting a validation function. It is much more transparent.
Example: JQuery
<form id="form">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});