欧芹验证不适用于选择下拉菜单

Posted

技术标签:

【中文标题】欧芹验证不适用于选择下拉菜单【英文标题】:Parsley validation does not work for select drop down 【发布时间】:2019-02-12 09:32:12 【问题描述】:

我对我的表单使用了 parsley 验证,但它不适用于选择列表,而它适用于输入。

我已经尝试添加属性data-parsley-required="true",但它也不起作用。删除tabindex,同样的问题仍然存在。

有人可以告诉我应该如何解决这个问题吗?

html

<form method="post" action="callback_handle.php" id="myForm">
                <div class="qucik-form">
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <div class="form-group">
                        <input name="fname" id="nameFooter" value="" type="text" class="form-control" placeholder="Name *" tabindex="11" required>
                        <span class="error" id="er_nameFooter"></span> </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <div class="form-group">
                        <input name="femail" id="emailFooter" value="" type="email" class="form-control" placeholder="Email *" tabindex="12" required>
                        <span class="error" id="er_emailFooter"></span> </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <div class="form-group">
                        <input name="fphone" id="phoneFooter" type="text" class="form-control" placeholder="Phone *" tabindex="14" required>
                        <span class="error" id="er_phoneFooter"></span> </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <div class="form-group">
                        <input name="city" id="city" type="text" class="form-control" placeholder="City">
                        <span class="error" id="er_skypeFooter"></span> </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <div class="form-group">
                        <select name="fservice" id="serviceFooter" class="form-control" required>
                          <option value="Select Interests">Select Interests *</option>
                          <option value="Website Design">Website Design</option>
                          <option value="Website ReDesign">Website ReDesign</option>
                          <option value="Website Development">Website Development ( Dynamic )</option>
                          <option value="E-Commerce Development">E-Commerce Development</option>
                          <option value="Search Engine Optimization">Search Engine Optimization</option>
                          <option value="Social Media Optimization">Social Media Optimization</option>
                            <option value="Pay Per Click">Pay Per Click</option>
                             <option value="Logo Designing">Logo Designing</option>
                             <option value="Complete Digital Marketing">Complete Digital Marketing</option>
                          <option value="Others">Others</option>
                        </select>
                        <span class="error" id="er_serviceFooter"></span> </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                      <button type="submit" name="callback" class="link btn btn-3 btn-3e">Send message<i class="fa fa-arrow-right"> </i></button>
                    </div>
                </div>
            </form>

JS:

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<script>

    $(document).ready(function() 
        $("#myForm").parsley();
    );

</script>

【问题讨论】:

【参考方案1】:

您的“选择兴趣*”选项不应包含value

【讨论】:

删除它,欧芹按预期工作。非常感谢!

以上是关于欧芹验证不适用于选择下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

下拉菜单不适用于移动浏览器

引导下拉菜单不适用于heroku

导航栏下拉菜单不适用于 Angular 和 Bootstrap 4

引导下拉菜单不适用于 ajax

悬停和焦点不适用于移动下拉菜单选项

AJax 不适用于 bootstrap-select