In JavaScript | SoloLearn: Learn to code for FREE!

+2

In JavaScript

how to make a input text contain only one letter maj and three Numbers

1/10/2017 6:06:25 PM

Garrach_hazem

50 Answers

New Answer

+12

<input type="text" oninput="validation();"> (include a validation function in JS)

+11

Nah, i believe it's better to spam user when typing… ^_^

+9

…or "oninput"…

+9

<!DOCTYPE html> <html> <head> <title>Validation</title> <script> function validate(){ try { if (document.getElementsByTagName("input")[0].value.toString().match(/\d/g).length==3&&document.getElementsByTagName("input")[0].value.length==4){alert("valid");}else{alert("invalid");} }catch(e){alert("invalid");} } </script> </head> <body> <input type="text" oninput="validate();" placeholder="1 char & 3 nums"> </body> </html>

+9

Ah, yes! do what @visph says… ^_^

+9

@visph when something is incomplete it is never valid!

+9

@visph I just gave him an example hoping he'll replace the "alert" with something else…… ~_~

+9

@visph gave many alternatives and minutes from his life to help… ~_~

+9

I shouldn't give either 'cause you don't know how to use it… ~_~

+9

Well… no-one else would help… we chose you! ~_~

+8

ok, just wait (slow internet)

+8

@Garrach tip : copy-paste ! ^_^

+8

DOESN'T WORK?!?! I checked it! ~_~

+8

Copy - Paste my code, it's working!… ~_~

+8

if you write : "123a" (3 numbers & 1 character) it says "valid"… ~_~

+6

You need to dynamicly handle it by yourself, with the help of javascript... Attach a 'onchange' event function to the input text you want the function control entry user in real-time. Inside this function, define the code to verify / correct the actual 'value" attribut content. Many kind of implementations are possible ;) [ EDIT ] 'onkeypress" event is preferable: check next post for code example and further explanations...

+6

HTML: <input type="text" onkeypress="inputHandler(this, filter, correct);"> [ EDIT ] 'oninput' event is more useful in this case ( check next posts ) JS: function inputHandler(src, filterCallback, fixCallback) { if ( ! filterCallback(src.value) ) src.value=correct(src.value); } function filter(val) { /* code for return true if 'val' is valid, else return false */ } function correct(val) { /* code for return corrected value of 'val': simply need to retrieve invalid char */ } Not tested ( means verified this one ), but it's the idea for a generic parametric handler ( you can define and apply how many filter you want ). I change 'onchange' event by replacing it with 'onkeypress" because from memory, it's less problematic ( onchange is only called when entry is validate by the user, meaning when element lost focus, on keypress occurs each time user press a key, so each time the value is supposed to have changed )

+6

'oninput' is clearly the better choice, because it's design especially for <input> element ( new event in html5 ). It's first difference/adavantage with keypress/keydown/keyup ( verified just now ) is that it will be fired in case of change due to a paste, or a drop, while key-family event don't ;)

+6

I wrote simple example, check it in my codes. "Code for Garrrach_hazem". Try to input letters and numbers I can comment it later because i need to go now.

+6

@VH species of sadistic! :D