3

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.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Liam
  • 83
  • 7
  • try this `/^(.*?[a-zA-Z]){2,}$/` – Pankaj Parkar Feb 24 '15 at 15:33
  • "Is there a better way"? The word Better is very suggestive, would you mind rephrasing that? You haven''t told us what's wrong with your solution at its current state. Why do you feel it is not working to your satisfaction? Please include the actual behaviour, and your desired behavior with example output. – Patrick Feb 24 '15 at 15:36
  • Yes, you are right. What I meant was, if is possible or better to use, another solution like html5 to do what I need. Require the user, to insert first and last name into one textbox. – Liam Feb 24 '15 at 16:06

2 Answers2

3

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.

Community
  • 1
  • 1
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Yes, that pattern works for what I need. But I'm still struggling the validation part. After submitting the form, how can i use this pattern to stop the submission? – Liam Feb 24 '15 at 16:02
  • 1
    write `ng-submit="submit()"` method which will call when you submit the form then inside that method use `if($scope.form.$valid) //submit the form usning ajax else alert("please fill required fields.");` – Pankaj Parkar Feb 24 '15 at 16:41
  • Thank you for the help.The submission part, its working, but the pattern is not. In your example, its always validate the textbox. – Liam Feb 25 '15 at 11:02
  • @Liam check my updated Fiddle in answer..now everything will work properly – Pankaj Parkar Feb 25 '15 at 11:28
0

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}
Liam
  • 83
  • 7