Alert Box appear only when alerts from parsley.js are active

Question

I am using Bootstrap and parsley.js (for form validation) All is working fine except I now have the error message showing up in an Alert (Bootstrap) Right now the alert box is showing on the screen whether there is an error or not. I would like it to appear only when there are errors and disappear when there isn't any errors from parsley.js. I have tried researching this issue and found some code that hid the alert box but none that worked with the alerts from Parsley.js. I typed up my own Javascript that is below thinking I could make it work, it doesn't (obviously). What should I change? Should I just trash the javascript all together and do something else? I would really love for each alert to appear in it's own Alert Box stacked one on top of another. I made a jsFiddle

Two Part Question

1. Make the alert box appear only when there is an error inside.

2. Make each alert passed from Parsley.js appear in it's own alert box (one another stacked on top of each other)

Attempted Javascript:

var x = document.getElementById("ol-error-container").innerHTML

            if (x == "")
            {
                document.getElementById("error-container").className +=" hide";
            }
            else
            {
                document.getElementById("error-container").className =" alert";
            }

Html Form Code:

<form class="form-horizontal well" data-validate="parsley" method="post">
<div class="control-group">
    <input type="text" class="input-xlarge" id="fullName" placeholder="Full Name" data-required="true" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide your name!">
</div>
<div class="control-group">
    <input type="text" class="input-xlarge" id="email" placeholder="E-mail Address" data-required="true" data-type="email" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid Email Address">
</div>
<div class="control-group">
    <input type="text" class="input-xlarge" id="phoneNumber" placeholder="Phone Number" data-required="true" data-type="phone" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid US Phone Number">
</div>
<div class="control-group">
    <textarea cols="5" class="input-xlarge" id="question" placeholder="Question/Comments" data-required="true" data-minlength="6" data-maxlength="200" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide a message that is 6-200 characters in lenght."></textarea>
</div>
<div class="control-group">
    <div class="input-append">
        <input class="input-medium" id="priority" type="text" disabled>
        <div class="btn-group" data-required="true">
            <button class="btn dropdown-toggle" data-toggle="dropdown">Priority <span class="caret"></span> 
            </button>
            <ul class="dropdown-menu" id="selectPriority">
                <li><a onclick="document.getElementById('priority').value='High'">High</a>

                </li>
                <li><a onclick="document.getElementById('priority').value='Normal'">Normal</a>

                </li>
                <li><a onclick="document.getElementById('priority').value='Low'">Low</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div class="control-group">
    <button type="submit" class="btn btn-primary">Submit</button>
    <input type="reset" class="btn" value="cancel">
    <hr>
    <p class="muted"><small>We will never sell or provide your information to anyone!</small>

    </p>
</div>

HTML Alert Box Code:

<div class="alert" id="error-container">
<ol id="ol-error-container" style="list-style-type:none">
    <li class="error-message" style="list-style-type:none"></li>
</ol>

Answer 1

it should be x == "" not x = ""