Jquery Validation restrict characters on live? - javascript

Is there a way to block or restrict special characters from input fields with jquery-validation?
For example, I would like to only authorize those characters [0-9\/]*.
I've read the whole documentation but I haven't found anything. So instead I've to write special codes for this which is not a good choice for the code.
I've seen that other javascript plugin validation can do that like Parsley by using a requirementType. But I don't really want to change the plugin to another cause I already know how to use it now.

Using jQuery validation, you can use this method (http://jqueryvalidation.org/jQuery.validator.addMethod) to add a validator that uses JavScript regex matching to return true or false if the input matches your pattern. This is a very easy way to integrate with the library you're using.
If you want to literally prevent the user from typing characters other than those, you need to attach an event handler to the inputs and block those characters on the keyDown event.
Either way, the matching logic is the same.

Related

TinyMCE Autocomplete Without Trigger Character, like gmail

I'm looking for a way to implement an autocomplete function of some sorts in TinyMCE that does not require a trigger character or shows a list of matches, but in stead suggests the continuation of a sentence like gmail does when you write an email.
(the rest of the sentence is suggested by the application)
In stead of the trigger character, the string to match will have to be for example the last few words typed, or the current sentence so far.
I have the backend to provide the actual suggestion based on a partial sentence but I can not find a way to implement this client side anywhere in the documentation. The only post on stackoverflow that looked relevant did not have the answer.
It does not work to simply not provide any trigger character, and it is also not possible to use a space bar / whitespace as the trigger character. Even if you could, it still needs to query the document for the querystring to send to my backend, not just the characters followed by a trigger character.
Should I not be using the autocomplete functionality for this? Is there a better way? How do I go about doing this?
https://fiddle.tiny.cloud/u7haab/12

Jquery validator allow only specific array of string

I know that using jquery validator we can allow specific characters in a textbox while validating form.
Is it possible that jquery validator should not allow specific array of strings. We can't write plenty of lines to check whether equal or not.
Thanks in advance:-)

Detecting each character inputed in field and run conditionals

I am building a web app. I believe it will be easiest if I try to explain what I want the user experience to look like before I ask my question.
I want my user to go on my site and begin to type in a text field. When each character is inputted, I want to run a conditional statement on that character to decided if it should be added to the text field. If the character inputted is not one I want, the character isn't added.
I have validations in my model to do this after the text is submited, but I want it to be real time. I'm guessing this relates to JavaScript and I am not comfortable enough in coding it to know what to search for/research. Can you assist me in where to look (Tutorials, Concepts, etc)?
Thank you for taking the time to read this.
You can do this with the preventDefault method on the event object passed to the keydown event. This basically tells the browser to not preform its default action (which on a text field would be appending the letter to the field).
Here is an implementation using jQuery for brevity, but you can implement the same functionality in pure javascript as well:
$('input').on('keydown', function(event) {
// event.which is the character code
if ( /* some condition */ ) event.preventDefault();
});
And here is a fiddle with an example where you cannot type the letter A: http://jsfiddle.net/354XJ/
It's not precisely your situation but a very good starting point would be this question and its answers: How to allow only numeric (0-9) in HTML inputbox using jQuery?
You are basically looking for javascript that will intercept the keypress and only allow it if it is an allowed key, the question above implements this for numeric keys - start with that and expand it as per your needs.

Prompt with hints in Javascript

I'd like to get some input from the user:
keywords = prompt("Input keywords separated by commas", "");
I have many various strings stored in an SQLite database that could suggest the user what to type.
Let's say you have an array or list of these strings. How would you code this hinting in Javascript? Are there some functions or code snippets for this functionality?
I'd like it to work similarly as here. When you start typing you get hint with possibilities. There is only one disadvantage, that you can't input more strings separated by commas. Here is this feature working with more strings.
Is prompt() function suitable for this purpose? You can use another way of getting user input.
Thank you
You cannot tweak the native prompt() javascript method.
I know you did not tag with jQuery but would be way easier to use a library to implement such a behavior.
You'll have to build your own dialog system using maybe jQuery UI Dialogs. They have an option to make it modal so the UI is blocked until the dialog is closed.
jQuery UI Dialog will not block javascript execution though like prompt does. You might need to be able to execute code when the dialog is closed. This answer show a way to implement that easily.
Finally, the jQuery UI Autocomplete provides an example on how to use it for multiple values in the same input. They use a comma-separator but I guess you could modify the example to work with whitespaces: jQuery UIAutocomplete Multiple Values
You can't really use any custom functionality with prompt().
You'd be better off creating an <input type="text"/> and hooking the whole thing up to a button, making the data get submitted whenever a use clicks it, or presses enter. Then code it to fetch an autosugges value whenever the user types in a new character.
You should take a look at jQuery UI's autocomplete component (it works with multiple strings as an input as well). You would also need to set up a server-side script that will take a possibly incomplete string as an input and output a possible list of matches back to the browser.

How can I validate input length, but ignore alphas?

I have an input that will have input between 3-5 alphanumeric characters.
I want to validate that the user input between 3-5 characters:
/^[A-Za-z0-9]{3,5}$/
But, I want to ignore any alpha characters on form submission, not strip them.
So an input value of "RS032" stays that way in the input on form submission, but the form only actually returns "032"
The question is a little shy of details, but I'm guessing you want to validate everything in the field except letters. So, if the input is abc1d2e3fgh and your requirement is 3 digits, you want that to pass.
For a very basic requirement like this, you can intersperse optional [A-Za-z]*? sets between the other required characters. So, for the 3-numbers requirement, you could use
[A-Za-z]*?\d[A-Za-z]*?\d[A-Za-z]*?\d[A-Za-z]*?
This requires 3 digits (\d), and allows any number of letters before, between, or after those digits.
If you need to use match/capture groups, instead of just verifying match/no-match this won't work.
Unless you have a very basic requirement, there is no way that I know of to achieve this with a single RegEx. You'll likely need to assign the string to another variable, strip the letters, and then validate. By assigning to another variable, you can leave the input in place.
Update in response to question edit:
It sounds like you do want to strip the letters, only you want to do it in the backend. I think that is exactly what you should do, instead of conflating that with validation.
If you really want to do the work client-side, you could use an additional, hidden field, that you update via Javascript when the "source" text changes. On the server you can ignore the "source" field and instead use the "stripped" one.

Categories