Develop Reference

Preventing users from entering non-digits in input text field with HTML5

I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:
<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">
But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.
How can I achieve what I want with html5?

So you can totally do that by adding type="number" to your input field, It'll work in most browsers.
I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.
var phone_input = document.getElementById('contact_phone');
function validDigits(n){
return n.replace(/[^0-9]+/g, '');
}
phone_input.addEventListener('keyup', function(){
var field = phone_input.value;
phone_input.value = validDigits(field);
});
Here's a quick codepen
I'd also put a bit of validation on the model, just in case someone bypasses the JS.

I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.

Custom validation on Angular Form - on blur

In Angular, I am trying to validate a value of a field on blur. I have a list of customers, and I want to check if the model value in the field is in my list of customers. If not, I want to set the validity to false.
I know that ng-model-options="{updateOn: 'blur'} exists, however, I can't use this because the field is a typeahead so it must update based on the model. The validation is what needs to happen on blur.
The answer seems to be:
Write it as a function in the controller and use $setValidity just as you would in a directive. Use ng-blur to trigger the function in the input field.
-However, I keep running into examples where a custom validation (make the field invalid if the model value does not match one in the list) is only written as a directive. Are there examples of custom validation written as a function?
Write a directive that only triggers on blur.
However, I can't find examples that do either of these things. Does anybody have an example of custom validation as a function OR a directive that only updates on blur of the field?
I found this link very helpful for custom validation but I still have the same problem with the difference between a function and a directive: How to add custom validation to an AngularJS form?

As something we've been working on recently:
<form name='vm.formName' id='vm.formName' novalidate>
<input type='text' id='textField' name='textField' ng-blur='vm.blurMethod()' ng-model='vm.model.text' />
// The submit is only here for show;
<input type='submit' id='submit' ng-click='vm.submitForm()' />
</form>
In the controller:
blurMethod() {
if (this.formName.textField.$viewValue !== myArbitraryValue) {
// $setValidity called on the form, setting the textfield's validity to false
// then you can have your own validators show the error in the template
this.formName.$setValidity('textField', false);
}
}
That's off the top of my head, will take a look in the morning to see if it mirrors what we've been using. Updated the $setValidity call now.
This assumes you're using the controllerAs: 'vm' syntax, which is why the form has a name 'vm.formname' and the controller is using 'this'.

I have used ui-bootstrap for typeahead with plenty of control on your validation ui-bootstrap typeahead
EDIT- Code sample
<input type="text" ng-model="selected"
typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control"
typeahead-no-results="$scope.matchFail">
<div ng-show="$scope.matchFail">Not on list!!</div>
When you choose a value that is not on the list, the div is displayed

Angular ng-model with required

I'm trying to create a simple input with html5 "required". I'm using placeholder, so I'd like the initial value of the input to be empty. I have the input bound to a ng-model that is initialized as empty (so the placeholder shows).
When I go to the page, it shows that input is required for the , which shouldn't show unless the user submits the form and the input is empty.
how can I do this:
<input type="text" required ng-model="name">
..in controller:
$scope.name = "";
and not have the form think I am submitting an empty input?

One way of only validating when the user has actually interacted with your input element is to use $dirty to determine wether to show your error message. e.g.
<span ng-show="form.name.$dirty && form.name.$error.required">
Name is required
</span>

I just created an example of form validation regarding to your question
This should be working:
http://plnkr.co/edit/6PTNg3atPHAjL0XFtvWj?p=preview

Angular Validation to show all errors on submit

I have a simple example form that will validate a name to be required and 3 letters at least. Nicely display errors as you make the field dirty:
[http://plnkr.co/edit/FEclhN?p=preview]
Our designer wants , however, all the fields that are empty and that are "required" to go "red" as well, when the user presses the Submit button. Right now, unless they have touched and made the field "dirty" the validation doesn't turn the field red.
Of course the field should not be red to start with, only after they Submit the form or they make a field dirty.
jQueryValidate.org does this, so that's what they want in Angular too.

I ran into this same requirement and solved it by adding a boolean onto my controller's scope to indicate if the form had been submitted formSubmitted
And inside my form submit method I would set the value of formSubmitted to true
Then I would dynamically add a class where I needed:
<div ng-class="{'required-error': formSubmitted && formName.field.$error.required}">
<input name="field" required/>
</div>

You can also use this
https://github.com/AngularAgility/AngularAgility
For all controls and error summary in toster.
Its best way to validate and focus on field which causes validation.

mvc 3 razor cannot clear form value with validation class

I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.

I was using an html input of type reset rather than the button type. The reset should not have been used in this case.