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
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've built a validation component that works great. However, I'd like to extend it by adding success messages when a form is submitted successfully.
In the component I pass in the form, watch for changes, and act on the error:
this.formGroup.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
if (this.formGroup.invalid) {
this.validation = { message: `Check for errors in the form`, valid: false };
} else {
this.validation = { message: '', valid: true };
}
});
However I can't see a direct way to get a submission event into my component so that I can show success in the ui.
Can I use the (ngSubmit) event somehow?
what would you do to get it?
UPDATE:
After significant time invested into this my feature request is here
Wrote about "success handling" on Medium
(2022) we finally have the ng-submitted class (v12.1)
I don't know any submission event directly from the FormGroup class, what I know is that you should listen it from the form template.
<form [formGroup]="formGroup" (ngSubmit)="submit()">
<!-- Your controls here-->
<button>Submit</button>
</form>
In your component code you should listen the submit event creating the submit() method
As of Angular 12.1 an ng-submitted class is added to the form element that has been submitted.
The class is automatically added on submissions, and removed on resets.
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
});
});
Is it possible to configure the kendo numeric textbox that my bound view model will receive an update when i click on the spin or change the numbers with keys? At the moment, only if the numeric text box lose the focus my view model will receive the update event.
The kendo databinding option data-value-update ... has sadly no effect on numeric text boxes
Thanks for any help
I know it's kinda late but here is my solution:
var numericBox = $("#yournumericinput").data("kendoNumericTextBox");
.
.
.
numericBox.element.on("keyup", function (e) {
var newValue = e.target.value;
numericBox.value(newValue);
numericBox.trigger("change");
});
That way the change event gets triggered immediately after the user has entered a new value, without having to wait for the blur event. Data validation checks are removed for brevity, but I advise you perform those as well.
And you could also bind the spin listener to trigger the change event.
numericBox.bind("spin", function (e) {
this.trigger("change");
});
You can try the below code. It works for me.
ViewModel
viewModel.bind("change", function (e) {
console.log("property Changed on spin ");
});
Razor code
<input id="tbSlideDuration" data-role="numerictextbox"
data-format="#"
data-min="1"
data-max="100"
data-bind="value:slideDuration, events: {spin:change}" />
this will call the change event under the hood :)
Ok, I am using umbraco forum module, and on the comment form it uses jquery validate plugin.
The problem is that I have added a search button on the same page using a UserControl, the search submit button triggers the comment form submission validation.
I have done some research, and added the 'cancel' css class to the button. This bypass the first validation issue, however, it still fall into the 'submitHandler'. Have read the source code and find a way to detect whether the search button triggers the submission. however, there is not a nice way to bypass the handler.
I am currently using a ugly way to do it: create javascript errors! I would like to know a nicer way to do the job. Many thanks!
Btw, I am currently using:
submitHandler: function (form) {
$(form).find(':hidden').each(function () {
var name = $(this).attr('name');
if (name && name.indexOf('btnSearch') === name.length - 'btnSearch'.length) {
// this is a dirty hack to avoid the validate plugin to work for the button
eval("var error = 1 2 ''");
}
});
// original code from umbraco ignored here....
}
...............
there is similar question here:
jQuery Validation plugin: disable validation for specified submit buttons
(it is a little bit different, as the submitHandler is used in this one...)
Use ignore and set the selector to whatever you need it to be.
$("#myform").validate({
ignore: ".ignore"
})