How can I validate input length, but ignore alphas? - javascript

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.

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

How to remove spaces, special characters and leading numbers with regex?

I want to create regex that can be used with jQuery that does below
No spaces
No special characters
Cannot start with number
I found most solutions for each point online, but I do not understand how to combine all 3. I will use this to alter a HTML form input when the form is submit.
Example someone writes '123 John' then it would change the input to just 'John' before submit. Or '123 John Is Me' becomes 'JohnIsMe' etc.
Why combine them?
Let's assume a user types in something invalid. Would it be better to say it's invalid, or would it be better to specifically say "cannot start with a number"?
Test each restriction separately, and return a helpful error message to the user based on what, specifically, is wrong with their input.
(Also, don't just change what the user types. That's confusing and bad experience as well. Have the user correct it, by telling them what's wrong.)

Reliable html5 input type handling

I know there is a pattern a attribute for html5 input tag, but this help to validate the field after the user has entered the value.
The request here is to prevent the user to type something wrong, instead of correct it after. I'm not interested to discuss if it's better or not - it's just the request.
I also know I could add an event listener for keyPress event and decide which chars accept.
But all the examples I saw are not cross-browser compatible (I'm interested at least in FF, Chrome, in both desktop and mobile versions) and they fails because the user can enter "----" or "....".
What could be a reliable, robust, cross-browser regexp pattern to allow the user to type:
any number [0..9]
only one decimal point ('.' or ',' converter to the first one)
a specified number of decimals (i.e. numbers after the decimal point)
optional only one sign symbol ('+' or '-') as first char
common text commands: arrow keys, copy/cut/paste, backspace, delete, enter
It's better without the use of jQuery - because I should add it only for this goal.
"The request here is to prevent the user" -- don't do that.
If I am typing my name, but my finger slips when typing the i and I hit the 8 key too... no big deal, I just hit backspace, right?
Well, with your idea, wrong. Your name input would disallow numbers, so the accidental 8 wouldn't appear, and the backspace would erase the i instead.
In your question you appear to be seeking a numeric input (have you considered <input type="number" />?) so the finger-slip could apply to the * key when trying to input a 9. Whatever your input the same idea applies.
Always allow the user to type whatever they want. When they are done typing (either onchange of the element or onsubmit of the form), then you tell them "hey, this thing you typed doesn't seem right."
Therefore, the behaviour provided by browsers supporting input[pattern] is correct, and should not be changed.

Jquery Validation restrict characters on live?

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.

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.

Categories