We Keep Coding

Getting the field of form angular

I have a form with some fields.
I'm validating the fields with css classes:(if the field is invalid and the user touched it, then input's border-color = red.)
select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched {
border-color: red;
}
If the user submits the form without filling one or more field, there would be a danger alert.
HTML:
<div ng-show="formInvalid>
error!
</div>
JS:
if ($scope.pniyaForm.$valid) {
$scope.formInvalid = false;
.....
} else {
$scope.formInvalid = true;
}
But, If the user submits the form and has not touched any of the field, the css classes don't influence.(because user didn't touch...)
I want to add the class in the code.
Does anyone have an idea for an elegant way to do this without writing it on each field separately?

A possible solution:
when you are executing your form function, add the following line into it.
$scope.$apply(function () {});
this line will cause the ng $scope.$watch() run and apply changes if they exist.
may work, may not work, read the following link for deeper understanding of the issue.
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Using ng-class validation in angularjs
<div class="form-group">
<label>Name</label>
<input type="text" required ng-model="name" name="name" ng-class="{'has-error': myForm.name.$invalid}" />
</div>
<div class="form-group">
<label>Age</label>
<input type="text" required ng-model="age" name="age" ng-class="{'has-error': myForm.age.$invalid}" />
</div>

If the user submits the form and has not touched any of the field, the css classes don't influence
You need to provide an initial defined value to an ngModel and at least provide the required attribute to an input.
Use ngClass to conditionally apply css classes in case some form parts are invalid
<form name="myform">
<div class="form-group" ng-class="{'has-error': myform.myinput.$invalid}">
<input name="myinput" ng-model="myName" class="...." required>
</div>
....
</form>
....
// in controller
$scope.myName = "cats"; // form is valid
$scope.myName = ""; // form is invalid, and the css class 'has-error' will be applied
Then use ngDisables in your submit button to prevent submission in case the form is invalid
<button type="submit" ng-disabled="myform.$invalid">submit</button>

Passwords validation using jquery form validation jquery.form-validator.js

I am using following code where I need to match the passwords inside a form. It doesn't work on most of helps provided on here and other websites. I could have missed something that I am unable to trace. Please help me with this.
HTML
<form id="user_form" class='has-validation-callback'>
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation-confirm="confirmation" data-validation-help="Please give us some more information">
</form>
JavaScript
$.validate({
modules : 'security',
form : '#user_form',
onError : function() {
alert('Sorry! Please complete the form fields.');
}
});
Link to library
http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.19/jquery.form-validator.js

Please refer password confirmation
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation="confirmation" data-validation-help="Please give us some more information">
for the second input change attribute data-validation-confirm="confirmation" to data-validation="confirmation" it will work.
Working fiddle

Try using a newer version of the library as it seems there may be a bug.
I was using the same version you had listed and received the same error. https://github.com/victorjonsson/jQuery-Form-Validator/issues/479

Getting input value with javascript when it's not part of the form?

I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks

Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case

Form validation on generated fields with ng-messages

For a day I fiddled around with getting form validation to work with the new ng-messages on generated fields with no success. I read in the angular documentation and on a github issue ng-repeat is not supported by ng-messages because it does not interpolate its fields. So, I decided to go the jquery route build the dom myself compile it and replace the element with my generated code, which after of course I don't get to work either. So some help would be much appreciated. Here's my html:
....
<app-field ng-repeat="field in fields" field="field" ng-model="selected[field.name]" form="form" type="input"></app-field>
<fieldset class="form-group">
<label for="field1s">static field 1</label>
<input name="field1s" type="text" ng-model="selected['field1']" class="form-control" required="">
<ng-messages for="form['field1'].$error">
<ng-message when="required">Is required</ng-message>
</ng-messages>
<label for="field2s">static field 2</label>
<input name="field2s" type="text" ng-model="selected.field2" class="form-control" required="" ng-maxlength="10" ng-minlength="2">
<ng-messages for="form.field2s.$error">
<ng-message when="required">Is required</ng-message>
<ng-message when="maxlength">Max length 10</ng-message>
<ng-message when="minlength">MIn length 2</ng-message>
</ng-messages>
</fieldset>
I've added some statically typed fields too so i could monitor the data source and the form. The directive app-field generates the dom which is cooked up with some jquery soup but it turned out to work quite well. I mean the generated dom looks like it is supposed to but ... but compiled it does not agree with angular, angular doesn't throw any errors but it just refuses to bind the dynamic fields to the form correctly. It updates the underlying object but does not do form validation let alone trigger the ng-messages and according to this post: Angularjs: Form validation on input field generated by directive I see no reason why it shouldn't. Here's a plunk: http://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB?p=preview
Any help is appreciated...

You need to have ng-form element inside every ng-repeat for dynamic field validation to work. I have fixed the problem in below plunker for field 1.
http://plnkr.co/edit/xQTLDa3TptXky8KIcSsh?p=preview
<form name="form">
<ng-form name="myform">
<input name="field1s" type="text" ng-model="selected['field1']" class="form-control" ng-required="true" ng-pattern="/^[0-9a-zA-Z]+$/">
<ng-messages for="form.myform['field1s'].$error">
<ng-message when="required">Is required</ng-message>
<ng-message when="pattern">alpha error </ng-message>
</ng-messages>
</ng-form>
</form>
I have commented out the custom JQuery code you had written. Since it is no longer required.
Please refer to this - https://github.com/angular/angular.js/issues/10165 for more info. on this problem.

form validations drop ng-model objects?

Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?

at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.