I have a more or less complex SPA with ~40 text input fields. Those input elements are not bundled by a <form>, but they are separated into categories. If a user submits, i would like to trigger a validation function.
My first approach was writing two directives, one for string input and one for numeric values, which would add an attribute to every invalid element, then using a validate() function which would look up every input field in order to check whether or not it has said attribute.
I stumbled over multiple issues, including the fact that this was a jQuery like solution to the problem.
How could i accomplish this in a more convenient way?
One of the ways I have been handling form validation when things are not inside of a form is by using ng-pattern. With ng-pattern you can either do direct regex there, or link to an expression to run a set of validations for you.
It would look something like this.
<input type="text" ng-pattern="Put your Regex Here or an Expression">
The angular docs for ng-pattern are pretty sparse, so good luck.
This approach may not be what you are looking for since it evaluates only one input at a time, but I hope this helps.
Related
I'm working on a html form, and I like to know if there is a tool or way to restrict the user to some rules in inputs, i.e.:
-Don't allow the user to put more than 2 digits after the dot
-Don't allow the user to put more than 1 dot
I was thinking on regular expressions but how to apply that live.
Thank you.
You can run a form validation process with JavaScript. Use HTML DOM to get all the input fields, then use string manipulation to search it's "value" attribute for characters.
document.getElementById() and similar methods can retrieve different elements on the page. After the getElement method you used to find the input field, type ".value" and then it should return whatever is in that field. Then run that through something like data.includes() or similar to check for certain characters.
I have an input that's used by JS to control submitting two forms with different actions, but only one of them will be submitted and it should include this input.
I can do it with a hidden input using JS to change their values when the original one changes but I'd like to know if there is an HTML5 solution.
Here is my JS code to do it:
$(function(){
$('#originalOne').change(function(){
// check if I should disable a form
$('.hiddenOnes').val($(this).val());
})
});
I think I might be understanding what you are asking, correct me if I'm wrong:
"Is there a way to update the values in one form based on the values in another using HTML5 only (without using JavaScript)?"
Unfortunately, the answer there is NO. You will need to attach event listeners and handle changes using JavaScript. I had previously suggested using a <fieldset> to group the inputs that you wanted to disable independently, but this method does not work for multiple form actions.
In my APEX application I have some calculation routine implemented in Javascript. The input is taken from multiple Text Fields. I want the calculation routine to work each time any of those Text Fields has been changed. Using Dynamic actions, how can I share this Javascript function among multiple Text Field change actions? Preferably avoiding any CSS modifications.
You can select multiple page items when specifying your single dynamic action to fire on change. They are comma separated in the Item(s) field (clue is in the name).
Also, as mentioned in the comments above, you could use a CSS class to group your items. As for whether this is a bad thing, check out this question.
Best practice: class or data attribute as identifier
Personally, I feel comfortable using classes to allow for easy jQuery selectors and it is both very common and natively supported in APEX.
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.
for example, I want the textfield input number only. my idea is when the user typing, it will call a javascript to check whether it is valid, if it is not valid, I delete the text which is just entered. But I think it is very complex to do so. Is there any simple way to do so?
Put a validation on submit.
JQuery Masking could be a good choice: http://digitalbush.com/projects/masked-input-plugin/
The script to do this is here. It's a pretty common requirement.
http://javascript.internet.com/forms/validate-numeric-only.html
I think, like o.k.w said, jQuery Masking would be a good choice because of 2 things:
jQuery is solid and fast
Masking is more user friendly than just deleting user input on the fly without any notification. Masking gives them a graphical reference of what type of input is expected and what the input might look like.