Question

我正在使用jQuery Validation Plugin（http://docs.jquery.com/Plugins/Validation/），我需要制作一个表单。

UPLOAD: <input type="file" name="image"  /><br>
URL: <input type="text" name="images">

如何制作以至少必须填写其中一个字段（例如class="required"）？

Answer 1

您正在寻找的内容在jQuery Validate中称为dependency-expression。如果您的表单看起来与您显示的内容（即2个输入，一个名为image，另一个名为images），则可以执行此操作：

$('form').validate({
    rules: {
       image: {
          required: 'input[name="images"]:blank'
       },
       images: {
          required: 'input[name="image"]:blank'
       }
    }
});

所以会发生的是，当它验证每个表单字段时，它会检查给定的表达式，如果它返回true，则需要当前的表单字段。如果它是假的，那就不是。

Answer 2

这可能有效但没有测试它只是快速写它来帮助你在路上

$(function() {
    $("input").focusout(function (){
        $('input').each(function(){
            $(this).addClass('required');
            if($(this).val()){
                $(this).removeClass('required');
            }
        });
    });
});

Here is a fiddle:

Answer 3

我通常会为这些东西添加自定义方法。尝试这样的事情。



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <style>
        .error {color: red}
    </style>

    <form id="testForm" enctype="multipart/form-data">

        <input name="image" class="oneof" />
        <br /><input name="images" type="file" class="oneof" />
        <br /><input type="submit" />
    </form>


    <script>
        // using custom methods
        $(document).ready(function(){
            jQuery.validator.addMethod("oneofelementsrequired", function(value, element, param) {
                element = element || false; 
                var $frm=$(element).parents('form:first'),
                    any=false, 
                    $ctrls=$frm.find( param );

                $ctrls.each( function(){
                    any = any || this.value != ''
                });
              return any; 
            }, "Please fill one of this fields");

            jQuery.validator.addClassRules({
                oneof: {oneofelementsrequired: '.oneof'}
            });

            $('#testForm').validate({
                submitHandler: function(){
                    alert('From is Ok');
                    return false;
                }
            });


        });

    </script>

demo

jQuery验证URL或文件

3 个答案: