Search code examples
node.jsexpresspugflash-message

Can I use a Jade if conditional to change a style class value? Using flash variables


Currently I get my message with no problem when the login if it isnt successfull, but I want to display a div if theres any message (for this time just the error message)

This is the code

    div(class='formPosSize')
        form(action='/auth/login' method='post' autocomplete='off')
          fieldset
            legend.legend Login
            .input
              input(name='username', placeholder='Email', required='')
              span
                i.fa.fa-envelope-o
            .input
              input(type='password',name='password', placeholder='Password', required='')
              span
                i.fa.fa-lock
            button.submit(type='submit')
              i.fa.fa-long-arrow-right


          .feedback(class=message!=="undefined" ? "" : "feederror")
             if(message)   
               |  #{message} 

if theres any message at all, I would like to change the current feedback style variable "display: none and opacity : 0" to "display: block and opacity : 1" a

the feedback class is just a rectangle, I want the message value in there and showing it if it does exist

i tried this too, but it didnt work

             if(message)  
              .feedback(class=feederror) 
                 |  #{message} 

I have another class called "feederror" that is the same as feedback, but the difference is with opacity and display..


Solution

  • I fixed it at last!

    One afternoon lost, but victory!

    whenever you get the "message" variable its better to check its lenght rather than check if exist, or is empty, or if true:

    this code:

    if (message.length > 0)
        div.feederror 
           div #{message}
    

    Generates this if the message variable has anything on it:

     <div class="feederror"> 
      <div>Usuario o contraseña incorrectas.</div>
     </div>
    

    And it does not generate anything if message does not have anything or does not exist.

    This helps when you need to show an already designed div with its class (in my code is feederror) containing the message variable from flash.