Validation get applied to textbox
0
When the page gets rendered required validation get applied by default. When I inspect that element, it shows ng-pristine and ng-invalid class at the same time.
In HTML :
<input type="password" class="form-control" placeholder="Password" name="password" required pattern=".*(?=.{8,})(?=.*d)(?=.*[a-zA-Z])(?=.*[`~!@@#$^*|+-_=;:()&?%'/,.<>{}[]\]).*" [ngModel]="user.password" #password="ngModel">
In TS :
public user:logdetails;
ngOnInit() {
this.user=new logdetails();
}
export class logdetails
{
password:string;
confirmpassword:string;
}
How to prevent this required validation at page load?
angular validation angular5
asked Nov 23 at 9:15
Amey
4612
|
show 5 more comments
0
When the page gets rendered required validation get applied by default. When I inspect that element, it shows ng-pristine and ng-invalid class at the same time.
In HTML :
<input type="password" class="form-control" placeholder="Password" name="password" required pattern=".*(?=.{8,})(?=.*d)(?=.*[a-zA-Z])(?=.*[`~!@@#$^*|+-_=;:()&?%'/,.<>{}[]\]).*" [ngModel]="user.password" #password="ngModel">
In TS :
public user:logdetails;
ngOnInit() {
this.user=new logdetails();
}
export class logdetails
{
password:string;
confirmpassword:string;
}
How to prevent this required validation at page load?
angular validation angular5
asked Nov 23 at 9:15
Amey
4612
What is your question ?
– selem mn
Nov 23 at 9:18
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
There is a pattern in yourinputtag that is why it is applied by default, when do you want to apply that validation then ?
– selem mn
Nov 23 at 9:22
1
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to.ng-invalid.ng-touchedinstead of just.ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter
– JB Nizet
Nov 23 at 9:33
|
show 5 more comments
0
0
0
When the page gets rendered required validation get applied by default. When I inspect that element, it shows ng-pristine and ng-invalid class at the same time.
In HTML :
<input type="password" class="form-control" placeholder="Password" name="password" required pattern=".*(?=.{8,})(?=.*d)(?=.*[a-zA-Z])(?=.*[`~!@@#$^*|+-_=;:()&?%'/,.<>{}[]\]).*" [ngModel]="user.password" #password="ngModel">
In TS :
public user:logdetails;
ngOnInit() {
this.user=new logdetails();
}
export class logdetails
{
password:string;
confirmpassword:string;
}
How to prevent this required validation at page load?
angular validation angular5
asked Nov 23 at 9:15
Amey
4612
When the page gets rendered required validation get applied by default. When I inspect that element, it shows ng-pristine and ng-invalid class at the same time.
In HTML :
<input type="password" class="form-control" placeholder="Password" name="password" required pattern=".*(?=.{8,})(?=.*d)(?=.*[a-zA-Z])(?=.*[`~!@@#$^*|+-_=;:()&?%'/,.<>{}[]\]).*" [ngModel]="user.password" #password="ngModel">
In TS :
public user:logdetails;
ngOnInit() {
this.user=new logdetails();
}
export class logdetails
{
password:string;
confirmpassword:string;
}
How to prevent this required validation at page load?
angular validation angular5
angular validation angular5
asked Nov 23 at 9:15
Amey
4612
asked Nov 23 at 9:15
Amey
4612
edited Nov 23 at 9:51
asked Nov 23 at 9:15
Amey
4612
asked Nov 23 at 9:15
Amey
4612
asked Nov 23 at 9:15
Amey
4612
4612
What is your question ?
– selem mn
Nov 23 at 9:18
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
There is a pattern in yourinputtag that is why it is applied by default, when do you want to apply that validation then ?
– selem mn
Nov 23 at 9:22
1
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to.ng-invalid.ng-touchedinstead of just.ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter
– JB Nizet
Nov 23 at 9:33
|
show 5 more comments
What is your question ?
– selem mn
Nov 23 at 9:18
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
There is a pattern in yourinputtag that is why it is applied by default, when do you want to apply that validation then ?
– selem mn
Nov 23 at 9:22
1
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to.ng-invalid.ng-touchedinstead of just.ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter
– JB Nizet
Nov 23 at 9:33
What is your question ?
– selem mn
Nov 23 at 9:18
What is your question ?
– selem mn
Nov 23 at 9:18
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
There is a pattern in your
input tag that is why it is applied by default, when do you want to apply that validation then ?– selem mn
Nov 23 at 9:22
There is a pattern in your
input tag that is why it is applied by default, when do you want to apply that validation then ?– selem mn
Nov 23 at 9:22
1
1
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to
.ng-invalid.ng-touched instead of just .ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter– JB Nizet
Nov 23 at 9:33
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to
.ng-invalid.ng-touched instead of just .ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter– JB Nizet
Nov 23 at 9:33
|
show 5 more comments
1 Answer
1
active
oldest
votes
0
You have added required attribute to the input field and if its null or "" that means that the field is not valid. If you wish to add css classes for validation only after user has touched the field check for pristine and valid. Pristine changes to false after user has touched input field. To remove required validation you have to delete required attribute from your input field.
answered Nov 23 at 9:23
Artis Vilcins
22
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443670%2fvalidation-get-applied-to-textbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You have added required attribute to the input field and if its null or "" that means that the field is not valid. If you wish to add css classes for validation only after user has touched the field check for pristine and valid. Pristine changes to false after user has touched input field. To remove required validation you have to delete required attribute from your input field.
answered Nov 23 at 9:23
Artis Vilcins
22
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
|
show 1 more comment
0
You have added required attribute to the input field and if its null or "" that means that the field is not valid. If you wish to add css classes for validation only after user has touched the field check for pristine and valid. Pristine changes to false after user has touched input field. To remove required validation you have to delete required attribute from your input field.
answered Nov 23 at 9:23
Artis Vilcins
22
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
|
show 1 more comment
0
0
0
You have added required attribute to the input field and if its null or "" that means that the field is not valid. If you wish to add css classes for validation only after user has touched the field check for pristine and valid. Pristine changes to false after user has touched input field. To remove required validation you have to delete required attribute from your input field.
answered Nov 23 at 9:23
Artis Vilcins
22
You have added required attribute to the input field and if its null or "" that means that the field is not valid. If you wish to add css classes for validation only after user has touched the field check for pristine and valid. Pristine changes to false after user has touched input field. To remove required validation you have to delete required attribute from your input field.
answered Nov 23 at 9:23
Artis Vilcins
22
answered Nov 23 at 9:23
Artis Vilcins
22
answered Nov 23 at 9:23
Artis Vilcins
22
answered Nov 23 at 9:23
Artis Vilcins
22
22
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
|
show 1 more comment
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
then what should be given to properties at begining. At start we assign empty model to input tags right? Cause have used same in other forms also but it works fine.
– Amey
Nov 23 at 9:28
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
Yes, but before warning the users that he has entered an invalid input field value check for formControl.pristine state, and show the warning only if pristine = false. And for code readabilty I suggest removing that pattern validation and using custom validators if you need something specific.
– Artis Vilcins
Nov 23 at 9:39
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I have also tried the form update validity and set form pristine and untouched again but it also does not worked for me.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
I also tried removing pattern but it did not fixed the issue.
– Amey
Nov 23 at 9:42
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
If i give simple string variable it shows required validation.
– Amey
Nov 23 at 9:46
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53443670%2fvalidation-get-applied-to-textbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is your question ?
– selem mn
Nov 23 at 9:18
why required validation gets applies and how to prevent it.
– Amey
Nov 23 at 9:19
Please add your CSS Class as well that gets applied.
– SiddAjmera
Nov 23 at 9:22
There is a pattern in your
inputtag that is why it is applied by default, when do you want to apply that validation then ?– selem mn
Nov 23 at 9:22
1
@Amey read my comment again. The red border doesn't appear all by itself. It appears because you have defined some CSS rule somewhere that says that when a field has the css class ng-invalid, it should have a red border. But you don't want that. You want it to appear only if the field has the class ng-invalid **and ** the class ng-touched. So change the CSS selector to
.ng-invalid.ng-touchedinstead of just.ng-invalid. It's a good thing that validation is always applied. You just want to not always display the red border, which is a different matter– JB Nizet
Nov 23 at 9:33