In my html 5 page, I want to force the user to add in the end of his login the ".app" string.
Do you know how I can make that ?
My current code:
<input type="text" name="user_login" placeholder="firstname.app" required style="width:92%;" pattern="/.app/">
Thanks you for your help.
EDIT
I have resolved my problem with a jQuery check and a html 5 pattern
JS:
// If the user login doesn't finish by .app, we add them
if(!$('input[name=user_login]').val().match('[.]app$'))
$('input[name=user_login]').val($('input[name=user_login]').val() + '.app');
HTML5:
<input type="text" name="user_login"
placeholder="firstname.app" required style="width:92%;"
pattern=".*\.app">
There are a few differences between regex in JavaScript and in HTML attributes :
you don't have to put your regex between /, contrary to js regex literals
the start and end are implicit, so here you should add .* to match the start
You also forgot to escape the dot.
All in one, you probably want this :
<input type="text" name="user_login"
placeholder="firstname.app" required style="width:92%;"
pattern=".*\.app">
Demonstration
try this:
if($('input[name="user_login"]').val().indexOf(".app") >= 0){
//code
}
or pattern:
<input type="text" name="user_login" placeholder="firstname.app" required style="width:92%;" pattern="\w*.app">
Here is demo
You could do it by specifying the specific pattern:
<input type="text"
name="user_login"
placeholder="firstname.app"
required style="width:92%;"
pattern="[A-Za-z-0-9]+\.app">
Related
I am trying to create a regex alphanumeric, underscore and space, but only allowed to start with a letter.
I am having this input that checks if the typed characters are matching the allowed chars, which works fine.
<input type="text" class="form-control" id="topic"
placeholder="Enter topic name" name="topic"
onkeypress="return /^[_ a-zA-Z0-9]+$/i.test(event.key)" required>
But If I try to make sure that the first chars is a letter it doesn't work
<input type="text" class="form-control" id="topic"
placeholder="Enter topic name" name="topic"
onkeypress="return /^[a-zA-Z][_ a-zA-Z0-9]+$/i.test(event.key)" required>
It basically block the whole field. I can see what I am doing wrong
As Wiktor Stribizew mentioned in his comment, your code is only validating the currently pressed key value. But an alternative to the on-submit validation is using an onkeyup handler, which has its pluses and minuses, which happen to be the same, namely that when this event occurs the input field has been potentially modified with new content. The minus is that if an illegal character has been entered, it will momentarily show in the field before it is removed. The plus is that no keystroke analysis is required.
function setupField(field, re)
{
field.autocomplete = "off";
field.saveValue = field.value;
field.onkeyup = function() {
var v = field.value;
if (v === '' || re.test(v)) {
field.saveValue = v;
}
else {
field.value = field.saveValue;
}
};
}
let topic = document.getElementById('topic');
setupField(topic, /^[a-z][a-z0-9_ ]*$/i);
<input type="text" class="form-control" id="topic" placeholder="Enter topic name" name="topic" required>
I'm making an html5 form and only want users to sign up with .edu or .gov email addresses. What would the regex look like for that? I know it must be checked serverside as well, but one step at a time.
Example:
<input type="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" />
Building on How to validate an email address in JavaScript? I came up with this using a simplified RFC 2822 compatible pattern:
[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#((?!-)[A-Za-z0-9-]{0,62}[A-Za-z0-9]\.)+(edu|gov)
Regex Demo
The major difference is how the domain part is evaluated. I took this from my previous answer.
<form action="javascript:console.log('ok')">
<input type="text" name="domain"
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#((?!-)[A-Za-z0-9-]{0,62}[A-Za-z0-9]\.)+(edu|gov)" title="Sorry, only email addresses from .edu and .org domains are allowed.">
<input type="submit">
</form>
Add this:
^[a-zA-Z0-9_.+-]+#(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(domain|domain2)\.(edu|gov)$
Demo
I have a plunkr here. How can I get the Submit button to be disabled till the dob is in mm/dd/yyyy pattern?
https://plnkr.co/edit/GtPDxw?p=preview
Here's the form
<form [formGroup]="flashyForm">
<input formControlName="dob" pattern="^\d{2}\/\d{2}\/\d{4}$" placeholder="Date of Birth">
<button type="submit" [disabled]="!flashyForm.valid">Submit</button>
</form>
You can try pattern="^(0[1-9]|1[0-2])/(0[1-9]|1[0-2])/([0-9]{4})$".
Customize year as per your need.
Pattern needs to be a string like
pattern="\d{2}\/\d{2}\/\d{4}"
^ and $ are added automatically. I don't remember if \ need to be escaped as \\, but I guess so.
See also https://github.com/angular/angular/issues/10150
I'd like to validate the password before the form is submit using Regex, Id like to know what whats the equivalent regex for the following PasswordValidator settings:
UserManager.PasswordValidator = new PasswordValidator
{
RequiredLength = 6,
RequireNonLetterOrDigit = true,
RequireDigit = false,
RequireLowercase = true,
RequireUppercase = true,
};
im using the AngujarJS pattern validation.
Example:
<input type="password" class="form-control" name="inputPassword" ng-minlength="6" np-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*(_|[^\w])).+$/" ng-model="userData.Password" />
<p class="alert-danger" ng-show="userDetails.inputPassword.$error.pattern">The Password is invalid</p>
But it simply ignore it.
Thank you very much!
Update 1
with the help of accepted answer i come to the following regex ^(?=.[a-z])(?=.[A-Z])(?=.*(_|[^\w])).+$ and added the length validation as ng-minlength="6" for some reason the pattern validation doesnt work on IE9 where the validation prevent the user save, rendering it totally useless.
Update 2
By suggested by stribizhev, changing the any symbol regex to (?=.*[\W_]) fixed IE9 validation, so it works 100% in IE9, final code is
<input type="password" class="form-control" name="inputPassword" ng-minlength="6" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).+$/" ng-model="userData.Password" />
<p class="alert-danger" ng-show="userDetails.inputPassword.$error.pattern || userDetails.inputPassword.$error.minlength">The Password is invalid</p>
thank you all very much
^(?=.*[!##$&*])(?=.*[a-z])(?=.*[A-Z]).{6,}$
I found that answer on SO which will give you hint how to construct your own regex https://stackoverflow.com/a/5142164/2892208
I've got a very simple cfform with a single form field:
<cfform action="asdf.cfm" method="post">
<cfinput name="fieldName" type="text" size="20" maxlength="20" required="yes" validate="regex" pattern="[A-Za-z]" message="Only characters are allowed." />
<input type="submit" name="btnSubmit" value="check" />
</cfform>
Theoretically, this would allow ONLY A-Z and a-z in any combination, and must have some content in it.
In practice, I'm able to enter 'a a' and the javascript validation does not complain. Since the 'space' character is not in A-Z and not in a-z, what's going on?
Thanks!
Chris
You are missing the start-of-string and end-of-string anchors:
^[A-Za-z]$
or, more likely:
^[A-Za-z]{1,20}$
Your sample, modified:
<cfform action="asdf.cfm" method="post">
<cfinput name="fieldName" type="text" size="20" maxlength="20" required="yes" validate="regex" pattern="^[A-Za-z]{1,20}$" message="Only characters are allowed." />
<input type="submit" name="btnSubmit" value="check" />
</cfform>
Without those anchors, the regex merely needs to match anywhere, it does not need to match entirely.
personally I would avoid using the built in coldfusion javascript. You will have much more control if you roll your own and it will give you the ability to display errors in other ways than an alert box.
<script>
function checkit() {
var v = document.getElementById("text1").value;
if(!v.match(/^[a-zA-Z]+$/)) {
alert(v + ' contains invalid characters');
return false;
}
return true;
}
</script>
<form onsubmit="return checkit()">
<input type="text" id="text1">
<input type="submit">
</form>
<script>
function checkit() {
var v = document.getElementById("text1").value;
if(!v.match(/^[a-zA-Z\\ \\.\\]+$/)) {
alert(v + ' contains invalid characters');
return false;
}
return true;
}
</script>
<form onsubmit="return checkit()">
<input type="text" id="text1">
<input type="submit">
</form>
Here is also enter and point possible, but how I'm must do to reconoce ä å ö.
Of course thanks for all help, You help so much.
Came across this article while I was searching for a solution of my own. Needed a non-intrusive way to keep people from entering anything by numbers in one field and nothing but letters, numbers or spaces in other fields. I couldn't use pattern="9999" for the numbers as it was not a required field and folks get "yelled at" if they tab through that field. Likewise, could not use pattern="xxx" for the alpha/numeric fields as I also needed to allow spaces.
Leapfrogging from this article and using javascript that previous programmers had developed for that client, I came up with these beautiful handlers, thought I'd share in case someone else needed this elegant solution and ALSO because sometimes I forget and would be able to find this again.
Either in a .js file you include or enclosed in tags:
function numChecker(e)
{
if (!e.value.match(/^[0-9]+$/))
{
e.value = e.value.substring(0.e.value.length -1 );
e.focus();
return false;
}
return true;
}
function charChecker(e)
{
if (!e.value.match(/^[a-zA-Z0-9\ ]+$/))
{
e.value = e.value.substring(0.e.value.length-1);
e.focus();
return false;
}
return true;
}
Then your input or cfinput fields would have OnKeyUp="numChecker(this)" or OnKeyUp="charChecker(this)" in their attributes.
As people type, if they enter an invalid character this script will kick in and simply remove that bad character. No extra buttons to click or alerts to dismiss.