jQuery 验证插件：我有多个图像，需要选择一张图像

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>

How do I validate this in jQuery 验证插件?

Answer 1

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

你只需要将此插件应用到单选/复选框组（根据需要），并为图像相关的单选/复选框输入字段设置验证“必需”。你的所有代码都应该在标签 ie

<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 行代码。