So I am using vue.js to build my UI and I am using the html DOM property validity along with rules on my input tags(pattern, minLength, maxLength etc.) It seems like the validity property only gets set if I edit the text box manually. If I programatically assign an invalid value to my variable bound to the input tag with v-model, the validity property is not working as expected. It only works if I actually enter something into the input. I have tried programatically firing off keyup and change events for the input box to try and get it to validate and it is not working. Has anyone encountered this before? I know there are good plugins for validating with vuejs but I would prefer to use the built in HTML5 functionality.
If you want to see code samples reply in comments.
Related
I try to automate a page using a script in the js console. I'm able to set an input to a field, but it's not used. When applying.
I tried setting it using:
document.getElementById("foo").value = "text"
This fills the input but if I try to apply the value it seems to be ignored.
The website seems to only save values which are typed using the keyboard.
Is there a way to simulate this in the js console or any other ways I could test instead of setting the value using above method.
I am trying to set custom validation on an input field in an Angular app. The validation cannot be set to a pattern, since it is based on the content of another field (e.i. Passwords must match)
A way to do validation in this case is to check for the fields on form input. However, I want to be able to check for the validity in real time, and be able to use CSS classes such as .ng-dirty and .ng-valid, which come when Angular takes care of validation.
I tried to use $scope.formName.inputName.$setValidity(...), but I am running into issues on that end (StackOverflow question here).
Is there another way in AngularJS to set custom validation?
As mentioned if you check
https://docs.angularjs.org/guide/forms#custom-validation
You'll see you can use directives to create your own custom validations, in the example provided the validation is done whenever you input a character.
If you use your browser to inspect the example (username input field) you'll see the classes (ng-not-empty ng-dirty ng-valid-parse ng-touched ng-valid ng-valid-username) being changed on the fly.
If you had a form these classes would be taken into account to change the form.$valid property to true or false. By default if form.$valid is false then you can't submit it.
I know this doesnt answer to your question but I found a couple of directives that can do that for you:
https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/
https://github.com/TheSharpieOne/angular-validation-match
Try it out to see if its what you need.
I'm currently making an HTML registration form that completely relies on AJAX and JavaScript (no libraries please), also using MDL.
My problem is that I want to validate the email and the username real-time, i. e. onBlur the AJAX makes a call to the server asking whether the email and the username are taken. If yes, I want to mark the inputs as invalid and display a textfield error saying what happened. This, however, doesn't seem to be possible using MDL.
What I tried: use customValidity(), but MDL only realises the change after a keydown, so this doesn't work. I also tired assigning the input divs an is-invalid class, but same problem as before.
What I need: override the validity from JS and trigger MDL into realising that the validity changed and should update elements accordingly.
Is this possible?
I'm building a Safari extension that will auto complete a bunch of fields found on an online form.
That online form is using angularJS to tie in the value in the fields with the value in a model. I don't know much about angularJS, but I could deduce that from the ng-model=user.firstname.value etc. directives found in the input tags.
My Safari extension will get the first name input field, and set firstNameField.val("A first name") in order to add a value in that field.
However, this doesn't seem to update the angularJS model, since if I am to exit that field manually, it'll color itself red, saying there is no data, even though there clearly is some text.
From my extension, I don't seem to be able to access the angular object unfortunately, so I cannot call the methods that I read need to be called (angular.$apply).
Seems like what I am trying to do is doable, since the LastPass extension correctly adds values to the input fields and causes the model to be correctly updated – the fields don't color themselves red.
I am currently working on a page that has a date picker for one of the field.
One of the requirements by my client is to prevent the user from editing the field manually. Only the date picker would be possible to be used. (jQuery DatePicker)
I had in mind to disable the field and use an hidden field to store the data (disabled from object ton send data on post). This sounds a bit wacky for something that could be done by javascript I'm pretty sure.
So the big question, in javascript is it possible to prevent manual edition of a field without stopping datepicker plugin?
Instead of disabling the field, just add the readonly attribute. It will have a similar effect as disabling the field, but without the need to store the value to a hidden field.
You can also access this property with javascript if needed:
document.getElementById("myTextBoxID").readOnly = true;