-1

enter image description here

I apply css in form it should apply when my form is invalid .I also write important but nothing happen .In other words I make a dynamic form from json ,Now I need to validate that form .so I apply css which is not working.why I am apply css because some one suggest that in this how to validate form using $pristine and $dirty in angular? you please why it is not apply here is my plunker http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview

/* Styles go here */


.ng-invalid {
  border :1px solid red !important;
}
.ng-pristine {
    border :1px solid blue !important;

}
.ng-pristine {
    border :1px solid blue !important;

}

Updated plunker http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview I press login button nothing happen

Improve this question
5
  • 1
    You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style Commented Aug 15, 2014 at 2:20
  • ok sorry checking wait for while Commented Aug 15, 2014 at 2:22
  • it create more problem ..it becomes red all field .I need it become red when I press login button.please check update Commented Aug 15, 2014 at 2:25
  • you need to update your CSS to just add the borders to the input fields Commented Aug 15, 2014 at 2:35
  • @khakiout I need it show on button click..is there possible to show some text. Commented Aug 15, 2014 at 2:38

2 Answers 2

Reset to default
2

You need to update your css into this

input.ng-invalid {
  border :1px solid red !important;
}

the class ng-invalid applies to the form as well since it AngularJS detects that the form is invalid so it applies the class to the form.

Edit

It seem that you are using a third party module for your forms. It has it's own validation styles so we have to use it. Here are some notes:

  1. I added the novalidate directive to your formly directive. This will prevent the browser to trigger its default validation, the browser's default validation will not trigger the ng-submit function if it finds an error.
  2. I added an ng-class="{'form-submitted':submitted}" to the form directive itself. (This is similar to the approach of PatrickEvans' answer

  3. In relation to Item 2, I modified the CSS to this. The red border will be applied if the form-submitted class is applied to the parent form.

    .form-submitted input.ng-invalid {
  border :1px solid red !important;
}

See Plunkr

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

but check my update ..It not work.It should become one when I press login button
I need it show on button click..is there possible to show some text.
@khakiout thanks for answering but your plunker will not working
@user944513 please check again :( I must've included a different version
@khakiout thanks sir you give great solution …do you have any idea to show text ..this "this field is requried" like below the input field example "invalid email" or any text when field is navalid
|
0

You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style.

If using Chrome, you can look at an elements applied styles and if there is a warning symbol next to the style (and has a line through it) it means it is an invalid value. Not sure what the other browsers Developer Tools looks like for this but this is what Chrome's looks like:

enter image description here

As for making the css only apply after hitting the login button you will need to setup a check. You can do this by using the ng-class directive

css 

.ng-invalid.apply {
  border :1px solid red !important;
}

html

<input type="email" ng-class="{apply:loginAttempted}" />
<button type="submit" ng-click="loginAttempted=true" />

the ng-class will apply the style apply to the element when loginAttempted is a truthy value. So when the element gets the ng-invalid and the apply classes then the border will be rendered.

Improve this answer

8 Comments

I need it become red when I press red .may I use another plugin ?
it makes what more useless? you haven't done anything except make the style value a valid one, you have not changed it to use the ng-class directive like i mention
SORRY SIR wait trying .I am trying upper solution see sir I apply this plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview.But my form is generated dynamically how I add ng class
sir do you have ant idea ?
Have you checked the documentation for the formly directive? Off the bat i would say you would probably have to modify their code to allow adding in angular directives
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.