Question

我正在使用jQuery验证插件，但我的表单包含某种图像选择器，我需要验证是否选择了一个图像..但我不知道它是否可能在jQuery验证插件中。这是代码片段：

<div id="options">
    <h1>Type</h1>
    <ul>
        <li>
            <p><a href="#"><img src="../images/general/option1.png" /></a>option1</p>
        </li>
        <li>
            <p><a href="#"><img src="../images/general/option2.png" /></a>option2</p>
        </li>
        <li>
            <p><a href="#"><img src="../images/general/option3.png" /></a>option3</p>
        </li>
        <li>
            <p><a href="#"><img src="../images/general/option4.png" /></a>option4</p>
        </li>
    </ul>
</div>

如何在jQuery验证插件中验证这一点？

Answer 1

@Kevin Lee，查看这个Jquery插件 http://jordankasper.com/jquery/imagecheck/examples.php

您只需将此插件应用于radio / checkbox组（根据需要），并为图像相关的radio / checkbox输入字段设置验证“required”。并且您的所有代码都应该在标签内，即

<form id='gallery_form'>
 <label>Sea</label>
 <input type='checkbox' name='image_gallery' value='sea' />

 <label>Mountain</label>
 <input type='checkbox' name='image_gallery' value='mountain' />

 <label>Sky</label>
 <input type='checkbox' name='image_gallery' value='sky' />

 <label>Sun</label>
 <input type='checkbox' name='image_gallery' value='sun' />

</form>

和javascript

$(document).ready(function(){

      $('input[name="image_gallary"]').each(function(){
              var src=this.value;
              $(this).simpleImageCheck({
                  image: src+'.png'
                  imageChecked: src.'_selected.png'
               });

      });

     $("#gallery_form").validate();

  });

只是为了给你和想法希望这会有所帮助：）

Answer 2

您可以将图像选择视为一组单选按钮输入，并使用jQuery验证来检查其中一个。有关如何将图像用作单选按钮的示例，请参阅此站点：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/。

如果要添加对多个选项的支持，可以使用复选框而不是单选按钮。

Answer 3

我认为您最好的选择是根据您所说的内容使用一些自定义代码。如果您已经有一个限制器来确保只有一个具有所选类的图像，只需运行$（“。whatever”）并检查长度是否等于1。它只有3行代码。

jQuery Validation Plugin：我有多个图像，需要选择一个图像

3 个答案: