Question

我正在使用Bootstrap和parsley.js（用于表单验证）一切正常，但我现在已经在Alert（Bootstrap）中显示错误消息现在屏幕上显示警告框是否有错误或不。我希望它只在出现错误时出现，并在parsley.js没有任何错误时消失。我已经尝试研究这个问题，发现一些代码隐藏了警报框但没有一个代码与Parsley.js的警报一起工作。我键入了我自己的Javascript，低于认为我可以使它工作，它（显然）。我应该改变什么？我应该只是将javascript全部丢弃并做其他事情吗？我真的很希望每个警报出现在它自己的警报箱中，并且堆叠在另一个上面。我做了jsFiddle

两部分问题

仅在内部出现错误时才显示警告框。
让从Parsley.js传递的每个警报出现在它自己的警告框中（彼此堆叠在一起）

尝试使用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 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代码：

<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

它应该是x == ""而不是x = ""

警报框仅在来自parsley.js的警报处于活动状态时出现

1 个答案: