current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite

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

share|improve this question
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 –  Patrick Evans 2 days ago
    
ok sorry checking wait for while –  user2535959 2 days ago
    
it create more problem ..it becomes red all field .I need it become red when I press login button.please check update –  user2535959 2 days ago
    
you need to update your CSS to just add the borders to the input fields –  khakiout 2 days ago
    
@khakiout I need it show on button click..is there possible to show some text. –  user2535959 2 days ago

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
    
but check my update ..It not work.It should become one when I press login button –  user2535959 2 days ago
    
I need it show on button click..is there possible to show some text. –  user2535959 2 days ago
    
@khakiout thanks for answering but your plunker will not working –  user944513 2 days ago
    
plnkr.co/edit/oP85VtbK9e3QrDZz2rMm?p=preview thanks it working now –  user944513 2 days ago
    
@user944513 please check again :( I must've included a different version –  khakiout 2 days ago
up vote 0 down vote

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.

share|improve this answer
    
check my update it make more useless –  user2535959 2 days ago
    
I need it become red when I press red .may I use another plugin ? –  user2535959 2 days ago
1  
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 –  Patrick Evans 2 days ago
    
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 –  user2535959 2 days ago
1  
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 –  Patrick Evans 2 days ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.