Require two words in textbox, with AngularJS - javascript

I really struggling with this. I need to force the user to write the first and last name, in only one textbox.
I using AngularJS, and I want to validate text field using ng-pattern. The field should accept all characters, and require 2 words.
This is input:
<input name="fistname_lastname" ng-model="fistname_lastname" ng-pattern='my_pattern' type="text">
I have the my pattern in the controller, like this:
$scope.my_pattern = /^\s*\w*\s*$/;
Is there another better way do it.

Yes, you can do it by directive too, but just for validating just text contains two characters or not ng-pattern would be better way to do.
Here your html would be using (.*?[a-zA-Z]){2,} this pattern.
HTML
<input type="text" ng-model="fistname_lastname" max-length="30"
ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
Working Fiddle
Update
If you want to stop your form from submitting,, then you need to no worry about it. Angular internally manages this for you. Whenever you mention ng-pattern against any form field, angular creates object for that field (field should have name and ng-model attribute), that object is responsible for the validity of particular field. As as ng-pattern regx doesn't gets satisfied, angular make that field as invalid, means it append ng-invalid-pattern & ng-invalid class. Resultant the form also gets invalid. and now if you can look at form object you will find that form gets invalid by using syntax form.$valid on html.
HTML
<form name="form" ng-submit="submit()">
<input type="text" ng-model="firstname_lastname" size="30" ng-pattern="/^(.*?[a-zA-Z]){2,}$/" placeholder="add new todo here"/>
<button type="submit">Submit</button>
</form>
Controller
$scope.submit = function(){
if($scope.form.$invalid) //here you can stop use from submitting for by checking validity
alert('Form is invalid'); //form is invalid
else
alert('Form is valid');//here you can do actual submit to server
}
Updated Fiddle
Hopefully this could help you, Thanks.

Thanks, for all your help. But what really worked was this regular expression.
\b([A-Z]{1}[a-z]{1,30}[- ]{0,1}|[A-Z]{1}[- \']{1}[A-Z]{0,1}
[a-z]{1,30}[- ]{0,1}|[a-z]{1,2}[ -\']{1}[A-Z]{1}[a-z]{1,30}){2,5}

Related

How to turn on/off a field from parsley.js form validation

When validating an email field [name=bar] in a form #foo, I want to switch validation of that field on and off, in relation to a checkbox.
Reading the docs, github issues and stackoverflow answers, I thought setting data-parsley-required="false" and/or data-parsley-validate="false" would be enough.
But it turns out, that all other constraints, like email, min-lenght, max-length are still validated and the input field still validates to an error condition. I would prefer it to validate to success or not at all.
<form id="foo">
<input name="bar"
maxlength="40"
value=""
class="form-control"
data-parsley-validate="false"
data-parsley-required="false"
type="email"
data-parsley-minlength="5"
data-parsley-trigger="input keyup change"
data-parsley-error-message="something is wrong">
</form>
See https://jsfiddle.net/88obg0sj/9/
So how is it possible to turn off field validation in way, it can be re-activated again?
You should tweak the excluded option, for example by adding ", [data-parsley-validate="false"]" to it.
You can follow this way:-
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();

Regular expression doesn't act as expected

I use a regular expression to validate some form inputs with angularjs. I use the ng-pattern for that.
<input type="text" ng-pattern="/^([A-z]){3}$/">
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
If i type anything not matching the expression it is not valid (as expected). If i type what is matching the pattern it will be valid (as expected).
But it doesn't work as expected at all. If i type nothing (empty text input) the form is valid, and that is what i want to avoid: It shouldn't be valid.
Any suggestions?
You'll need to give the input an ng-model attribute for Angular form validation to recognize it. You may also want to give the input a name attribute for more control. See Angular Input documentation.
This example should demonstrate how ng-model and name can be used for form validation. Note that I've also adjusted your regex and made the input required.
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="demoForm">
<input type="text"
ng-model="myValue"
name="myInput"
ng-pattern="/^[A-Za-z]{3}$/"
required />
<button type="submit" ng-disabled="demoForm.$invalid">Ok</button>
<div>Input valid? {{demoForm.myInput.$valid}}</div>
<div>Form valid? {{demoForm.$valid}}</div>
<div>Model value: {{myValue}}</div>
</form>
</div>

Angular validators and ng-maxlength use

I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:
<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo"
maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.
Any help here? I can't find any "easy" info regarding this issue and Angular validators.
edit 1:
I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:
<div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?
To have the errors published on the scope, a form directive is required.
<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
<input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>
(Notice that the above uses the name attribute of the input to publish the form data - really, the ngModelController - on the scope)
So, the above works, and it's preferable if you do form validation. But, if you just need to check the length of some input, you don't have to use form validation - you could just check the model directly:
<div ng-class="{'has-error': formData.foo.length > 50}>
<input ng-model="formData.foo">
</div>
as you are using ng-model to make validations ,, this class ng-invalid will be added to your input
docs : https://docs.angularjs.org/api/ng/directive/ngModel
to use $error you need to access it using forms and names not ng-model ,, and the ng-class should be bound to the $error.maxlength not $error only
tutorial : https://scotch.io/tutorials/angularjs-form-validation
If you use the maxlength, a user will never be able to enter more characters than that, so you will never get the ng-maxlength error. It doesn't make sense to use maxlength and ngMaxlength together IMHO.
See the example on docs.angularjs.org/api/ng/directive/ngMaxlength (open the example in plunker and add maxlength attribute)

Check if the name field in a form contains a number using javascript and the onchange event

im the definition of a rookie and i hav no idea what im doing. i have to create a function using javascript to perform a validation on the 'name' field in a form. The check will see if there is anything entered or if the name contains a number. On top of this i have to use a onchange event. I tried searching and i got answers put i saw the answers had jquery code in it and i cant use it in this question. Im clueless on what to do, can someone please help? Here is the form im working with
<form method="get">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name" onChange="" >
<br>
<label for="age">Age</label>
<input type="age" id="age" placeholder="Age">
<br>
<label for="location">Location</label>
<input type="location" id="location" placeholder="Location">
<br>
<button type="submit">Submit</button>
</form>
Here is a javascript function that takes an input parameter. It will check if the input value has any digit characters in it using regular expression. If it does it sends an alert and then removes all the digit characters (again using regular expression). It will then check if the input value is an empty string and send an alert if it is.
function checkName(input) {
// Check if input contains a digit
if (/\d/.test(input.value)) {
alert('Name contains a number');
// Remove all digit characters
input.value = input.value.replace(/\d/gi, '');
}
// Check if input is empty
if (input.value === '') {
alert('Name is empty');
}
return true;
}​
Add your function call to the onChange property of the input, passing in this object for the function's variable reference:
<input type="text" id="name" placeholder="Name" onChange="checkName(this)" >
Here is a demo showing this working:
http://jsfiddle.net/PMKsS/1/
Something to note. This function will only call when the name input value is changed, as that is what the onChange call will do. Therefore the name input will not be checked for being empty when the form submits.
Also, this is worth a read: Why is using onClick() in HTML a bad practice?. It explains about adding javascript event listeners through javascript rather than through an attribute and why doing the other way isn't great. Although it doesn't offer a way to do this in pure javascript.

Validation with specfic input types generated from an XML

I am in the midst of trying to come up with the best way for some validation within a generic MVC based XML which outputs the following.
<input name="xxxx" value="xxxx" ValidationType="Email" IsRequired="True" />
Basically if things contain certain elements, we validate it, if it's required than we do, if not, we don't etc etc. I tried some things but it seems the best way to do this would be a the JQuery "contains" method. I also know that that "ValidationType" is not really a valid attribute of input, but the XML outputs it this way. Any feedback would be appreciated. Thanks. I'm trying to do this as non complicated as possible :)
I would recommend using jquery validate plugin. You can validated elements with class-based attributes and add custom validation if need be. for example, should you need an input required. The output would look like this.
<input name="xxxx" value="xxxx" class="required" />
for email validation you can use
<input name="xxxx" value="xxxx" class="required email" />
Then execute the .valid() function to validated

Categories

Resources