I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.
I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>
Related
I am using the below input text box tag in 2 different templates.
<div class="text-input">
<input type="text" class="form-control" id="" placeholder="">
</div>
In the first template i am able to enter text. But when i change the view to the second template, i am unable to enter text in the text box. Again when i go back to the first template, I am not able to enter text.
I have noticed in the console that both the text box are in the below state initially (before clicking in the text box to enter text):
<input type="text" class="form-control ng-pristine ng-valid ng-empty ng-touched" id="" placeholder="" style="">
When text entering is possible, the class is updated to
<input type="text" class="form-control ng-valid ng-touched ng-not-empty ng-dirty ng-valid-parse" id="" placeholder="" >
There is no change in class when it is disabled.
What is the possible problem and how can i fix this?
Edits :
<form class="view-tools ">
<ng-include src="'views/view1.tpl.html'"></ng-include>
</form>
<form class="view-tools ">
<ng-include src="'views/view2.tpl.html'"></ng-include>
</form>
i have a function in the controller which basically sets scope variables to true or false to show/hide the views.
Try adding both a required and a ng-model to your inputs.
<input type="text" ng-model="thisInput" class="form-control" id="" placeholder="" required>
See if that fixes it
I've added 2 forms on one page of a wordpress website: one for mobile display and one in the sidebar for desktop computers (bigger screens).
I've done this previously and can't seem to figure out why it doesn't work this time.
What happens now is that the desktop form always throws a validation error on the email field, even when entering a valid email. It only doesn't work for the email field on the desktop form, the validation works on all other input fields (name, ..) - and on the mobile form as well.
I'm using simple Java Script to validate the forms, both forms use the same function for validating the email address.
the Form validation is triggered by the submit button and all form fields have different id's.
If I'm not displaying the mobile form, the desktop email validation works fine?!?
Now to the code (just the key elements for this question):
html-form on the page
<form class="formMob">
<label for="fullName">Full Name</label>
<input type="text" id="fullName-mob" name="fullName" type="text">
<div class="form-error" id="error-fullName-mob">
<span>Please enter your full name</span>
</div>
<label for="email">E-mail Address</label>
<input type="email" id="email-mob" name="email" placeholder="email address">
<div class="form-error" id="error-email-mob">
<span>Please enter a valid email</span>
</div>
<button class="submitMe" id="submitForm-mob">Submit Details</button>
</form>
<!-- Desktop form -->
<form class="form">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" type="text">
<div class="form-error" id="error-fullName">
<span>Please enter your full name</span>
</div>
<label for="email">E-mail Address</label>
<input type="email" id="email" name="email" placeholder="email address">
<div class="form-error" id="error-email">
<span>Please enter a valid email</span>
</div>
<button class="submitMe" id="submitForm">Submit Details</button>
</form>
The Java Script:
$jq(function(){
$jq('#submitForm').click(function(event) {
/*validate email*/
if(validateEmail( $jq('#email').val() )){
$jq('#error-email').hide();
}
else{
valido = false;
$jq('#error-email').show('fast');
}
});
$jq('#submitForm-mob').click(function(event) {
/*validate email*/
if(validateEmail($jq('#email-mob').val())){
$jq('#error-email-mob').hide();
}
else{
valido = false;
$jq('#error-email-mob').show('fast');
}
});
});
Would appreciate any comments or ideas. Thanks!
one issue is that your labels for your mob version are pointing to the Id's of the inputs for the full version
<label for="email">E-mail Address</label>
should be
<label for="email-mob">E-mail Address</label>
Probably not the cause of validation errors, but would cause issues for screen readers
I just found the problem.
I missed to see that on these wordpress pages where it doesn't work comments are activated as well.
The comments have an input form with an email field also which is has the same ID for the email field and appears first in the code.
So JavaScript checked the comment email field (when there are 2 fields with the same ID Javascript uses the first one that appears in the code) for validation.
Now I simply had to use a different ID for the desktop form, like so:
<input type="email" id="email-reg" name="email" placeholder="email address">
And adapt the JS validation accordingly...
if(validateEmail( $jq('#email-reg').val() )){
$jq('#error-email-reg').hide();
}
else{
valido = false;
$jq('#error-email-reg').show('fast');
}
Cheers
i need one help.I need to validate the input field for URL.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px" id="identitylabel">Website URL:</span>
<input type="text" name="url" id="weburl" class="form-control oditek-form" placeholder="Add Website URL" ng-model="url" ng-keypress="clearField('weburl');">
</div>
Here right now i can entry any URL of any format.suppose user is entering one URL like www.angon.com then it should throw the validation error to add http/https in beginning of the URL.Please help me.
You could simply use add type="url" to your input field, so that would verify value of input field and by verify its valid URL or not it will add ng-invalid class over input field.
Markup
<input type="url" name="url" id="weburl"
class="form-control oditek-form" placeholder="Add Website URL"
ng-model="url" ng-keypress="clearField('weburl');"/>
Refer Examples :- https://docs.angularjs.org/api/ng/input/input%5Burl%5D
ng-pattern "- https://docs.angularjs.org/api/ng/directive/ngPattern
I am adding a form input field required doesn't work here
<input name="ResellerAddress[address_1]" ng-model="reseller.address" required>
<div class="field_error_row" id="ResellerAddress_address_1_error" ng-show="addressForm.ResellerAddress[address_1].$error.required"><span>This is an error</span></div>
But does work here
<input name="address" ng-model="reseller.address" required>
<div class="field_error_row" id="ResellerAddress_address_1_error" ng-show="addressForm.address.$error.required"><span>This is an error</span></div>
Is there a way to force required to support array input fields?
I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.