I'm using the Verify.js library (http://verifyjs.com/). It seems to be exactly what I need to do client side validation.
However, I'm having trouble getting it to work with my regular expressions I'm writing. It seems whenever I try a lookahead, the form is always allowed to be submitted and the regular expression is not evaluated (maybe it's not compiling)?
I believe my regular expression is correct. I'm trying to verify the user input an integer or a decimal.
<form>Type abc
<input required type="text" data-validate="regex(^abc$)" />Type integer/decimal
<input required type="text" data-validate="regex(^[0-9]+([\,\.][0-9]+)?$)" />
<input type="submit" />
Here's a fiddle:
https://jsfiddle.net/ms4pg776/1/
I fixed this by adding a rule to the $.verify variable.
$.verify.addRules({
isIntegerOrDouble: {
regex: /^[0-9]+([\\.][0-9]+)?$/,
message: "Please enter an integer or a decimal number."
}
});
Then in the HTML:
<input required data-validate="isIntegerOrDouble" type="text"/>
Hope it helps someone!
Related
I am trying to use a regular expression to validate an email address. It does not seem to be doing any validation at all. When I load the page the Submit button is disabled because of the $pristine but as soon as I type a letter the button becomes enabled. Also I am aware that the regex is only accepting upper-case at the moment. The following code is my form:
<form name="myForm" ng-hide="email" >
Insert Email : <br/>
<input type="text" name="email" ng-pattern="/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\\.[A-Z]
{2,4}$/" ng-model="insert_email" required>
<br/>
<button ng-hide="email"
type="submit"
ng-disabled="myForm.email.$pristine || myForm.email.$invalid">Submit</button>
</form>
I am not sure but I think the problem may lie with the regex itself.
take out the email in myForm.email.$pristine and in myForm.email.$invalid
to look like:
myForm.$pristine
and
myForm.$invalid
also try with ng-required instead of required
It seems to be two things. It looks like the ng-pattern expects an expression instead of a string attribute.
So you need to wrap it in a string if you want to use an inline expression.
Like so:
ng-pattern="'^[A-Z0-9._%+-]+#[A-Z0-9.-]+\\.[A-Z]{2,4}$'"
Also, there seems to be some issues with your regex. I changed it to this:
ng-pattern="'^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'"
It seems to work.
Plunker Demo
I am using the nifty parsley js As you can see in the documentation
there is only data-parsley-type="alphanum" which allows numbers and letters. I am trying to create fields that ONLY allow letters.
Anyone know how to do this?
You could use a pattern:
data-parsley-pattern="^[a-zA-Z]+$"
You can use such input validator, in order to obtain an only letter field.
<input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Type something" />
I am trying to implement input number field which will allow positive or negative numbers.
I have used "/^0|[1-9]\d*$/" regex expression for ng-pattern.
But it is not working.For character input it is not showing any error.
I have pasted my code here.
Update
I don't want to make this field as required.I just want only number validation(charters are not allowed).
There are a couple of problems with your code:
The pattern /^0|...$/ is interpreted as /(^0)|(...$)/. So, your pattern will accept any string that either begins with 0 (no matter what follows) or ends with any digit in [1-9] (optionally followed by any number of digits).
The correct pattern is: /^(0|[1-9][0-9]*)$/ (note that \d will match more characters than [0-9], e.g. arabic digit symbols etc).
The input elements of type number are handled in the following way by the browser:
If their content is not a valid number, then their value property is set to ''.
Thus, entering 1w3 will cause the value to be an empty string, so then pattern will not be applied.
You should use an input element of type text.
(This is not directly related to your question, but I noticed in your fiddle, you were using <form>.<input>.$invalid, instead of the (probably) intended <form>.<input>.$valid.
$invalid is a property of the FormController only.)
Based on the above, your code should look more like this:
<input type="text" name="price_field" ng-model="price"
ng-pattern="/^(0|[1-9][0-9]*)$/" />
(For accepting negative numbers as well, change ng-pattern to /^(0|\-?[1-9][0-9]*)$/.)
See, also, this short demo.
(UPDATE: The demo has been updated to illustrate the differences between number- and text-fields and between different patterns.)
Why do not use required with min. So we can write:
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number"
ng-model="price"
ng-init="price=0"
name="price_field"
min="0"
required
>
<span ng-show="myForm.price_field.$error.required ||
myForm.price_field.$error.min">Not a valid number!</span>
<input type="submit" value="submit" />
</form>
</div>
Demo Fiddle
Howevewr if you still want to use pattern, remove type="number". I'm not sure but sounds like type number has own pattern, this is a reason why it doesn't work.
Here is 2nd Demo Fiddle
used htm5 pattern for input number only
<input type="number" name="country_code" pattern="[0-9]" >
http://www.w3schools.com/tags/att_input_pattern.asp
I am using regular expression first time, and I really amazed! well, new discovery always amazement :).
I am using in JavaScript. I am using in following manner;(There are many fields and all are working perfectly fine except this phone formatting)
function validate(form) {
var phone = form.phone.value;
var phoneRegex = /^(\+|00)\d{2,3}-\d{1,2}-\d{3}-\d{4}$/g;
//Checking 'phone' and its regular expressions
if(phone == "") {
inlineMsg('phone','<strong>Error</strong><br />You must enter phone number.',2);
return false;
}
if(!phone.match(deptRegex)) {
inlineMsg('phone','<strong>Error</strong><br />Enter valid phone <br />+xxx-x-xxx-xxxx (or) <br />00xxx-x-xxx-xxxx.',2);
return false;
}
return true;
}
HTML
<div id="wrapper">
<form name="form" id="form" class="form" onsubmit="validate(this);return false">
<label for="phone">Phone:</label><input type="text" name="phone" id="phone" />
<input type="submit" value="Submit" class="submit" />
</div>
Now I am confuse that I might wrote the wrong expression but I tested it as well. I think I am mistaken to write the expression in JavaScript. Can someone help?
P.SThe following is the image from a regular expression online tester where I tested the expression.
I can see two problems with your code:
You don't have a closing </form> tag before the last </div>
You're using two different variable names for your regex: phoneRegex and deptRegex.
Once you correct those problems, the code runs fine. Have a look at it working on jsFiddle: http://jsfiddle.net/XFWGk/
If that doesn't work, the problem is probably your inlineMsg function. I'm not familiar with that one, so make sure you're using it correctly.
^(\+|00)\d{2,3}-\d{1,2}-\d{3}-\d{4}$
This matches +nn[n]-n[n]-nnn-nnnn or 0nn[n]-n[n]-nnn-nnnn
What country is that for?
As well as the 00 dial prefix, you might want to also include 011 dial prefix as used from US/Canada.
I would like to write a function to validate a full name input in a form with Javascript:
a single word will be ok, a string with some blank character among name surname, middle name too, but I do not want any digit.
Any suggestion?
There are several ways to write this, but, simply, the regular expression
/^[a-zA-Z ]+$/
should work for you. It will find any combination of alpha characters and spaces but no digits.
Edit to add the information from my comment, which I feel is important:
You may also wish to add the apostrophe and hyphen between the brackets, since Irish and Italian names include the former (O'Donnell, D'Ambrosio) and some folks have hyphenated last names (Claude Levi-Strauss, Ima Page-Turner, etc.).
This would result in the following expression:
/^[a-zA-Z'- ]+$/
Try this RegEx for maximum compatibility:
Don't forget to escape the single quote-marks (') if you put this in a JavaScript string enclosed with single quotes.
^(?:((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-.\s])){1,}(['’,\-\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){1,})(['’\-,\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){2,})?)*)$
Example:
function checkName(eid){ alert(/^(?:((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-.\s])){1,}(['’,\-\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){1,})(['’\-,\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){2,})?)*)$/.test(document.getElementById(eid).value)? 'Congratulations! You entered a valid name.' : 'Sorry, You entered an invalid name. Please try again.');};
*
{
color:#535353;
font-family:Arial, Helvetica, Sans-Serif;
}
input:valid
{
background-color: #DEFFDF;
}
input:invalid
{
background-color: #C7D7ED;
}
<form action="#" method="post" onsubmit="checkName('full_name');return false;">
<label for ="full_name">Your Name: </label>
<input type="text" name="full_name" id="full_name" maxlength="85" pattern="^(?:((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-.\s])){1,}(['’,\-\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){1,})(['’\-,\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\+=##$%ˆ&*(){}|~<>;:[\]'’,\-\.\s])){2,})?)*)$" title="Please enter your FULL name." style='width:200px;height:auto;' required>
<br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
I would suggest not putting so much effort in validating data via JS. If a user has JS disabled, you will end up with some data you don't want on database.
Validate it via the server side.
Now, regards your question, I would try with regular expressions.