AngularJS validation not working correctly - javascript

I have some form fields where I only want to allow letters for them to be ('ng-valid'). I have it like the following:
<input type="text" ng-model="Example.field1" ng-pattern="/[a-zA-Z]/" />
It works correctly if you only type in letters, or only type in non-letters, but if they are mixed it won't mark the field as invalid. Can someone tell me why this would be happening? Thanks in advance.

Try this pattern
/^([A-Za-z]+)$/
Right now you are saying that you want one character anywhere in the string.

Related

AngularJS: Escape HTML in input fields

What is the best way to escape HTML in the input field? For example, I've search input field
<input id="search" type="text" ng-model="search" placeholder="search...">
And I want to escape if somebody types something like this:
<script>alert("test123");</script>
this completely depends on your use case. If you just want it to escape it for the users view (so basically sanitizing) you can use angular $sanitize & $sce for it
https://docs.angularjs.org/api/ngSanitize/service/$sanitize and https://docs.angularjs.org/api/ng/service/$sce
however if you want to store it somewhere and want it escaped, you can build a filter. You can find an example here: Escape HTML text in an AngularJS directive
You could use lodash _.escape([string='']). This is a easy and simple solution.
_.escape($scope.search);
You could use pattern for your input box like -
<input type='text' pattern='[a-zA-Z0-9]+'>
Use an expression that best suits your needs.

Trouble adding data-parsley-pattern programmatically

I'm using Parsley, and it's great! I want to add different validators programmatically, depending on locale, using javascript/JQuery. When I hard-code like so:
<input type="text" id="billingPostalCode"
name="userInput_billingPostalCode"
value='<c:out value="${param.billingPostalCode}"></c:out>'
class="form-control" required=""
data-parsley-pattern="^\d{5}(?:[-\s]\d{4})?$"
data-parsley-error-message="Valid Zip/Postal Code Required"></input>
it works great. However, when I try to add it programmatically, it doesn't. I have this in a .jsp file:
<input type="text" id="billingPostalCode"
value='<c:out value="${param.billingPostalCode}"></c:out>'
class="form-control" required=""
data-parsley-error-message="Valid Zip/Postal Code Required">
</input>
And this in .js:
$('#billingPostalCode').attr('data-parsley-pattern', "^\d{5}(?:[-\s]\d{4})?$");
The attribute gets added (I can inspect the element and see it), but it doesn't validate correctly (it sees valid input as invalid). I have tried placing the JQuery code both before and after attaching parsley to the form:
[here...]
$('#paymentInfoForm').parsley( ... );
[and here...]
I have also experimented with the regex, anchored and unanchored, simplified versions, etc. But like I said, the regex works perfectly when it's hard-coded.
Could there be some interference with JSP? Am I missing something? Thanks in advance.
I worked around this by using [0-9] instead of /d in my regular expression. It does seem to be a bug, though. This works as expected:
$('#billingPostalCode').attr('data-parsley-pattern', "[0-9]{5}(?:[-\s][0-9]{4})?");
but the following code not won't validate anything, and will even break hard-coded validation:
$('#billingPostalCode').attr('data-parsley-pattern', "\d{5}(?:[-\s]\d{4})?");
The problem must be specific to javascript, since it works when hard-coded into the jsp file.

Regex problems with angularjs

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

Auto suggest when write a character in input field using JavaScript

I have an input field. When I click on this input field and write something then it will show all the suggested words that I want.
Like: If I write 'c' then it will show suggested words that i declared 'C#','Code','C++'
HTML:
<input type="text" class="input_field" />
How can I do it using JavaScript? Thank you.
Please refer for the auto complete http://jqueryui.com/autocomplete/
You may try following. It is my favourite at least.
Twitter Typeahead JS

How can I validate a full name input in a form using javascript?

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.

Categories