I am using asyncBlurFields. I tried following actions: change, startAsyncValidation, touch, blur. None is triggering the async validation. Then I read redux-form doesn't work well with hidden inputs, so I changed type to text and it is still not working. Only time when async. validation is triggered is when user blurs the element.
Is my only option to add ref to a form instance, dig out asyncValidate, get all required parameters manually and call it myself? I hope there is a better way, I don't want to add lengthy hacks to many forms. And that is my question:
How to easily trigger asyncValidate without calling it with all its parameters myself?
Related
I have am using the Vuejs-datepicker
The problem I am having is I want to use a typable input as well as the datepicker, but when I type into this input field it fires the keyup event which triggers its v-on:selected event.
Meaning if I start typing in '2012-02-02' with it submits on ever key up.
Usually this would be easy to solve as you can use a .length but this vue component always hands back a Date that is parsed. So that won't work.
I have the idea to deconstruct the component and build my own but was hoping someone might have an idea for a different solution
Did you tried the Event Modifiers?
You could try to use then in #keyup, something like #keyup.prevent...
Se at, look for "Event Modifiers":
https://v2.vuejs.org/v2/guide/events.html
I want to internationalize the form validation messages. I managed to do that for standard inputs using this solution. For React Select, though, it's behaving a little differently. Apparently, all that is needed is to override onChange and onInvalid inside an inputProps prop.
However, it seems that the embedded <input/> doesn't fire its onChange function when its value changes. That means that, once the Select is invalid, it never changes back to valid. Another thing that might be related is that the embedded <input/>'s value is null after an option is selected.
Here is a CodeSandbox that shows how far I've got. The first Select works as expected, but with the default validation message. The second Select have a custom message, but doesn't work as expected. The <input/> is there to show that onChange is not being called in the embedded <input/>.
Please let me know if it's possible to make it behave as expected.
Thanks in advance.
I managed to do something usable but, as I said in comments, it's not pretty. If that link goes dead, it involves setting required to true/false in order to try to make the message appear only once, and using setCustomValidity whenever the message inevitably appears.
I'll raise an issue in React Select because I think there has to be a better way, as it's shown in the example with pure <input/>.
I am trying to add some custom logic in my MVC5 project to change the behavior of unobtrusive javascript client side validation of text input. By change I mean I'd like to be able to apply bootstrap style including glyphicons dynamically.
I know it can be done by manipulating DOM - applying and removing appropriate classes (like 'has-success' etc.). Yet I don't know in what event I could handle this not to override default behavior applied in jquery.validate.*. The best situation would be if I could recognize a bad format in runtime (so let's say the user is to write number, but he's just pressed "s"), not just after button submit. I could do it quite easily by checking HTML5 attributes used for validating, but I don't know when I could do that.
I've tried on do it in document.ready(), but submitting a button doesn't make this event to trigger if there are errors(corresponding ActionResult is not called), and- that's the point I would even want it to trigger.
Any ideas what event would be appriopriate? I don't want any additional jQuery plugins etc., I'd like the behavior it is now I just need to make some changes and I need to know where I can do that.
You could use jQuery's .change() function.
$( ".target" ).change(function() {
_yourcodehere_
});
Itt fill fire whenever the selected input's value changes
Is it possible to trigger browser built-in html 5 validation process without form tag? I want to show the browser error messages if my input control is invalid without using form tag. I know I can check validation using checkValidity function but how to tell browser to trigger validation process?
I agree with CBroe , I'm not sure you can use HTML5 form validation without a actual form.. I've found this link and it should be of some use to you:
https://stackoverflow.com/a/7562439/4092442
You can't trigger the native validation UI, but you can easily take advantage of the validation API on arbitrary input elements:
$('input').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});
The first event fires checkValidity on every input element as soon as it loses focus, if the element is invalid then the corresponding event will be fired and trapped by the second event handler. This one sets the focus back to the element, but that could be quite annoying, I assume you have a better solution for notifying about the errors. Here's a working example of my code above.
If that does not help, perhaps you can get creative and create a form, that doesn't look like a form. Hide the submit button etc. That way you can take advantage of the functionality.
Also, maybe provide a little more explanation as to what it is you're trying to accomplish. I have personally found that helps people offer detailed solutions. Solutions I often never even considered. :) Hope this helps!
This is absolutely possible using .reportValidity(), not sure why the other answers said it isn't. An example to check all inputs for validity:
document.querySelectorAll('input').forEach(e => e.reportValidity())
Later, but it can be help to news search.
You can use
$(elem)[0].reportValidity()
I was thinking of forcing an onblur handler to run by calling the element's blur method. But then, I thought it wouldn't work, because I remembered that calling submit on a FormElement does not cause its onsubmit method to be run.
After some experimentation, I found that calling blur does cause the element's onblur handler to get called. This seems very inconsistent, not that it surprises me (this is JS after all). Still, if there's a good reason for this, I'd like to know. Is there a good reason to call the handler in the case of blur but not submit?
I agree it seems inconsistent. My take is that OnSubmit behavior has a ton of legacy baggage because much of its functionality was designed so that people could code right inside of form elements. To this end onsubmit was used to validate input without cracking open a source editor or javascript file. My guess is that when they coded this behavior (a long time ago), this seemed wise because once you are in javascript the programmer can easily validate the input themselves so the automatic check isn't necessary. Seems like an oversight to me.
This following website on quirksmode specifically warns of this, so clearly many people are being confused by this.
http://www.quirksmode.org/js/forms.html