Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

Is there a way to validate a field in angular without using a directive? For example: I want to make following validation on an input field.

  • If field is empty we should show "Field must contain a value" message.
  • if field contains alpha Numeric characters we should show "Field can contain only digits".
  • An EVEN number - message to the user "Value must be an even number".

I want to make following validation in a call to JavaScript function.

I goggled around and saw that there is a way to use ng-valid and $error , however I was not managed to make it work.

Code below is according to one of the answers I got: 

<div ng-app>
<form name='theForm' novalidate>
    <input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/>
    <span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span>
    <span ng-show='theText.length<1'>Field must contain a value</span>
    <span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span>
    <br/><input type='submit' value='Submit' />
</form>

I want to take what inside the last [span] and put inside a JavaScript function in order to make it more generic and eventually change only JS and not the HTML when conditions are changing

Can someone please advise? a working example would be great.

share|improve this question
 
If you wanna do all of these validations in a javascript function, why not go the angular way and create a custom validation directive? –  Shay Friedman Aug 8 at 12:39
 
Why do you want to use a Javascript function ? Angular can do it while watching the models like here : jsfiddle.net/DotDotDot/6UJZk/1 , using another function wouldn't be as efficient I think –  DotDotDot Aug 8 at 12:44
add comment

3 Answers

up vote 5 down vote accepted

I'm surprised no one has mentioned ui-validate

$scope.isOdd = function($value){
  return $value % 2;
}
...
<form name="myform">
  <input ng-model="myVal" name="value" required
    ng-pattern="/^[0-9]*$/" ui-validate=" 'isOdd($value)' "></input>
  <pre>{{myform.value.$error|json}}</pre>
</form>

Doesn't get any simpler than that, and it's PROPER AngularJS validation (not silly watches)

Here's a working demo

share|improve this answer
 
this is exactly what I was looking for, thanks. Can you please add a working example? I could not make your example work –  Scription Aug 9 at 5:41
 
@Scription added. Looks like the stupid thing requires a form to work. Don't forgot the ui.validate module –  ProLoser Aug 13 at 1:05
add comment
up vote 2 down vote

Take a look at the angularjs form documentation - http://docs.angularjs.org/guide/forms . In general, it is based on the HTML5 attributes like required, min, max, etc.

To get, for example, your first requirement done - "an empty field should show "Field must contain a value" message, yo uwould do something like that:

<input type="text" ng-model="user.name" name="uName" required /><br />
<div ng-show="form.uName.$invalid">
  <span ng-show="form.uName.$error.required">Field must contain a value.</span>
</div>

For digits only field you can use the pattern attribute with a matching regular expression (example: http://www.wufoo.com/html5/attributes/10-pattern.html).

For even number validation, I'm not sure - I think you'd have to go with custom validation for that (meaning you'd have to create a directive) or use the pattern attribute somehow.

Last but not least - remember to add novalidate to the <form> tag. Otherwise the browser will try to validate your fields as well and you don't want that:

<form ... novalidate>
 ...
</form>
share|improve this answer
 
You answered my q only regarding "require" attribute. As for the rest, maybe I did not make my Q clear enough, I want to use JavaScript function that would make the correct validation on each user key press to the field (or leaving the field) –  Scription Aug 8 at 12:31
 
I wrote what should be done for the digits and even number validation - for digits you can use the pattern attribute (no need for custom JS function). For the even number validation, that's trickier and I don't think you will be able to get away without a directive. –  Shay Friedman Aug 8 at 12:36
 
I don't want to use directive at all ONLY JS –  Scription Aug 8 at 12:42
1  
So why are you using angularjs if you don't wanna use its capabilities? –  Shay Friedman Aug 8 at 12:43
add comment
up vote 1 down vote

Well you can try to create a func

<span ng-show='isEven(theText)'>Value must be an even number</span>

$scope.isEven=function(data) {
    if(data) {
        return data%2===0
    }
    return true;
}

The method can either be defined on the current controller scope or on $rootScope.

Not a very angular way, as directives would be better but i think it would work.

share|improve this answer
 
I want to use JavaScript and be able to change it instead of changing the HTML. however, if directive is the "Angular" way then I'm willing to consider it as well. Can you please give me an example how to use it in directive? –  Scription Aug 8 at 13:58
 
If you look at the angular developer guide for forms, and check for custom validation section you would see a working example there docs.angularjs.org/guide/forms –  Chandermani Aug 8 at 14:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.