2

I'm using twitter bootstrap and alert elements to use within my web page and I want to use this as validation summary towards the top section of my page.

The issue that I have is when I use "alert alert-danger" on my create.chstml page, this displayed the red warning bar by default when the page is loaded.

The actual validation works on the form fields they are supposed to, however, I just need to find a way of hiding this warning bar when the page loads and then get this to kick in when my create button has been clicked.

I have tried some of the bootstrap properties like Hidden:hidden but this doesn't seem to work. Can I use javascript to complete this task and link this to the button create I have?

Here is the bootstrap I have on my create.cshtml

        <div class="form-horizontal">
            <div class="row" >
                <div class="alert">
                    @Html.ValidationSummary(false, " ", new { @class = "text-danger alert alert-danger" })
                </div>
            </div>
       </div>
Hudhaifa Yoosuf
  • 869
  • 2
  • 12
  • 28
Betty Lazzari
  • 99
  • 1
  • 6
  • 13
  • 1
    dddddduplicate check out the answer [here](http://stackoverflow.com/questions/13867307/show-validationsummary-mvc3-as-alert-error-bootstrap) – George Dec 19 '16 at 11:34

1 Answers1

2

Just use the hide class of bootstrap and when you click on button you can remove that class.

<div class="form-horizontal">
   <div class="row" >
      <div class="alert hide"> //add class here
          @Html.ValidationSummary(false, " ", new { @class = "text-danger alert alert-danger" })
      </div>
   </div>
</div>

It will hide the alert on the page load and will work on button click as you want.

Code Lღver
  • 15,573
  • 16
  • 56
  • 75
  • @CodeLover thank you for the above. just one other question... here is my code for the button.... Can I add the "alert hide" class to the button class alongside the "btn btn-primary" or does this need to be an additional class around the whole of the button? – Betty Lazzari Dec 19 '16 at 12:05
  • @BettyLazzari Why you want to add alert hide class with button? if you will add the class hide on button then this button will be hidden (no mean of that). To be clear you can add any class with any element. – Code Lღver Dec 20 '16 at 05:22
  • The .hide class works but it is deprecated. Using the .hidden class is preferable. https://stackoverflow.com/questions/18568736/how-to-hide-element-using-twitter-bootstrap-3-and-show-it-using-jquery – RevNoah Feb 27 '18 at 22:01