This question already has an answer here:
Learning Regular Expressions [closed]
(1 answer)
Closed 4 years ago.
I have an input field on a registration screen where the user has to enter his user id which is generally 6 characters long. First 2 characters are always alphabets, and the following characters are mostly numbers. (eg. ab123c or xy5678)
How can I check in the input field with jquery / javascript that user only enters in above format before hitting submit.
<input type="text" maxlength="6" name="uid" id="uid" placeholder="enter user id here">
You can validate your input using regex
regex = /^[a-z]{2}[a-z0-9]{4}$/i ;
regex = /^[a-z]{2}[a-z0-9]{4}$/i ;
console.log('ab1234', regex.test('ab1234'));
console.log('abc234', regex.test('abc234'));
console.log('ab1d34', regex.test('ab1d34'));
console.log('ab12e4', regex.test('ab12e4'));
console.log('ab12yz', regex.test('ab12yz'));
console.log('2b1234', regex.test('2b1234'));
console.log('a11234', regex.test('a11234'));
You don't need javascript or jquery. Can use HTML. w3c School
<input type="text" maxlength="6" name="uid" id="uid" placeholder="enter user id here" pattern="[a-zA-z]{2}[a-zA-Z0-9]{4}">
Thanks for the update Barmar, not used it before.
Update:
First I don't know why this is closed. The question isn't about learning regular expression, it's about implementation. Aurelien provides the right answer if you want to use jQuery, mine is if you don't want to use jQuery or javascript. Zohaib ljaz doesn't address the core issue of implementation.
Second: Most of the comments aren't helpful, he does provided examples and it has max-length in the code so of course 6 is the max.
Try this
$('form').on('submit', function(e){
e.preventDefault();
if($('#uid').val().match(/^[a-zA-Z]{2}[a-zA-Z0-9]{4}$/)){
$(this).submit()
}
else {
//Do your error logic here
}
}
Related
This question already has answers here:
How to place the cursor (auto focus) in text box when a page gets loaded without javascript support?
(7 answers)
Closed 5 years ago.
I would like to fill an input without having to select it with my mouse before. Just using javascript and not Jquery .
What I mean is that they user just have ton type his answer and it goes directly into the input. Here is my HTML.
<input id="inputresponse" name="response" type="text" value="" />
I have searched everywhere but I can't find a clue. I guess we should use either keyup or keypress, but I can't find how.
Your help is highly appreciated, thanks !
Use Autofocus on HTML tag as -
<input id="inputresponse" name="response" type="text" autofocus>
Another Way, You can use js also -
window.onload = function() {
var input = document.getElementById("inputresponse").focus();
}
<input id="inputresponse" name="response" type="text">
This should work:
$('#inputresponse').focus();
Just setting this on your page will automatically focus on the input element and anything typed will be added within.
This question already has answers here:
Input type=password, don't let browser remember the password
(15 answers)
Closed 7 years ago.
I have been searching since couple of hours for this problem but not found any appropriate solution for this problem,the problem is I am having three input forms on my page every time I save the form values it ask me to save password in chrome how can I solve this problem using JavaScript or query
<input type="password" autocomplete="off"/>
i have tried autocomplete='off' but it does not work
Best way is to change your password type to text and replace the characters with asterisks or dots whatever you like.
change <input type="password" /> to <input type="text" id="password" style="-webkit-text-security: disc;"/>
There are other options as well:
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
autocomplete="off" is the right code, but many browsers don't want to support it. They want to let the user chose instead of the code itself. So you can write it, but browser can choose to not read it.
This question already has answers here:
HTML5 Email input pattern attribute
(20 answers)
Closed 7 years ago.
I am stuck with this issue to which I did not pay attention to before.
<label> Email Address </label>
<input type="email" id="emailAddress" required placeholder='Email Address' />
<button type="submit" class="button primary small">Submit</button>
In my JS file I am checking for its validation using checkValidity()
checkValidEmail: function(event){
var emailAddress = $('#emailAddress');
if(emailAddress[0].checkValidity()){
console.log('Valid');
} else{
console.log('Not Valid');
}
}
"keyup #emailAddress": "checkValidEmail" // KeyUp works as expected
Output:
'a#b' // Valid
I do not understand this behavior. As per my knowledge #.com was the regex for input email.
Please note: I tried this on multiple sites with forms and it shows the same input. In the above case I am executing this on the chrome browser.
Thanks for taking time to reply!
If you want to use regular expression validation, read on
http://www.regular-expressions.info/email.html
Be aware that below is 100% valid and working email address :-) Use it often for testing incorrectly implemented email validation
xn--80a1acny#xn--80auew.xn--j1amh
Another option is to check if email address domain name is valid. Do do that you can query DNS server for MX record (this one points to SMTP server responsible for receiving incoming mail). You will need server side code to do that.
in HTML5 you can validate email like this
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
This question already has answers here:
Best way to defend against mysql injection and cross site scripting
(4 answers)
Closed 7 years ago.
I have a website that has an input form that submits to a php page and adds a players username to a database and counts the views of that player's name to a top 10 list.
My friend tried out inputting other stuff such as html code and javascript.
it get's displayed on my top 10 list.
do you have any suggestions how I can make my form more secure?
I have been searching for ages and haven't found anything yet.
all help would be highly appreciated :)
<form method="get" action="player.php">
<div class="form-group">
<div class="input-group input-group-lg">
<input name="user" type="text" class="form-control" placeholder="Steve" aria-describedby="sizing-addon2">
<span class="input-group-btn">
<input type="submit" class="btn btn-success" value="View Skin">
</span>
</div>
</form>
Freeze your requirement around username e.g. alphanumeric including special chars and Max length etc. Write validation logic using javascript regular expression. Reject everything else that fails.
Client side (HTML/Javascript) validation is only to be nice and responsive to the user, it can always be circumvented by a malicious user. Any validation needed should be done server side even if it repeats validation done on the client side.
Do not allow user to input special characters is the best way to block it. Well to be more secure and confident always have a limited set of valid characters for each text box and validate them on client-side as well as on the server side.
One example would be
function validateUsername(){
var username = document.getElementById('txt_username').value;
if( /[^a-zA-Z0-9]/.test( username ) ) {
alert('Input is not alphanumeric');
return false;
}
return true;
}
On server side you can also use regular expression. like following
if(preg_match('/[^a-z_\-0-9]/i', $username))
{
echo "not valid string";
}
How to validate input field to enter mobile number and that mobile number should begins with "07" also if some one enter mobile number with space, space should remove on click. . eg: 07 xxxx xxxx onclick it should be 07xxxxxxxx
Now i used html 5 validation method to give warning:
<input type="text" name="mobile_number" required="" title="Number format should be 07xxxxxxxx" pattern="\d{10}">
but this code does not validate it. can someone help me to validate this
When I had to solve the same problem, I used Masked Input Plugin.
You asked me to do it using simple javascript.Here is you answer
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
var xyz=document.getElementById('mob_no').value.trim();
if(xyz.substr(0,2)==='07')
{
var new_no= document.getElementById('mob_no').value.replace(/\s/g,"")
alert("number after validations check is"+new_no);
}
else
{
alert("incorrect number");
}
}
<input type="text" id="mob_no" name="mobile_number" required="" title="Number format should be 07xxxxxxxx" onblur="myFunction()">
</body>
</html>
Feel free to ask anything and plz repond it worked or not.
Your pattern for accepting telephone number starting with 07 is
<input type="text" name="mobile_number" required="" title="Number format should be 07xxxxxxxx" pattern="^07\d{8}$">
validate 07 at the beginning and after that accept any 8 digit like follow
pattern="^07\d{8}$"
Niles has the right idea.
So, just attach a click handler or a behavior that strips the spaces... ala.
var a = "07989 8989 8 8";
//substitute your element reference ala jQuery('input[name="mobile_number"]');
a = a.replace(/\s+/g,''); // strip the white space
if( /^07\d{8}$/.test(a) ){
// passed test
}else{
// did not pass, show error
}
I believe, like Niles said you would want to use the pattern pattern="^07\d{8}$" which means, in english String starting with "07" ending with any numerical sequence equaling 8 characters
Further more, like James was pointing out, use Javascript to remove your whitespaces. However I would add a interval, to clear them automatically so the user understands how the input works for further usage.
<script type="text/javascript">
var inputElm = document.getElementById('phone_number_id_name'), // id="" name of element
input = inputElm.value;
setInterval(function() { inputElm.value = input.replace(/\s+/g, ''); }, 100); // turncate white-space of input every 100ms
</script>