Question

我有一个表单，我试图验证它有两个字段都是可选的：

<label><b>URL Webcam Image:</b></label>
<p></p>
<input type="text" name="photo" id="photo" class="input"  />
<p></p>
<label><b>Upload</b></label>
    <br/><span>JPG, max. 200 kb</span> 
 <input type='file' name='uploaded_file' id="uploaded_file" /> 
<p></p>

如果两个字段都填写完毕，则验证失败，如果只填写其中一个字段或两个字段都为空，则验证应该正常我无法找到一个使用Jquery验证的方法来实现这一点。我发现的所有方法都是必需条件，但我不想在这两个字段中使用它

Answer 1

您必须使用the addMethod() method撰写新的自定义规则。

$.validator.addMethod('notBoth', function (value, element, param) {
    return this.optional(element) || ($(element).is(':filled') && $('[name="' + param + '"]').is(':blank'));
}, "you must leave one of these blank");

$('#myform').validate({
    rules: {
        foo: {
            notBoth: 'bar'
        },
        bar: {
            notBoth: 'foo'
        }
    } 
});

DEMO：http://jsfiddle.net/uv23hgr7/

您还需要使用groups和errorPlacement选项将两条错误消息合并为一条并将其放置在您的布局中。

Answer 2

检查两个imagedata字段是否都有值。如果只填写了一个，则触发真实提交：

＆＃13;

    var orig = $('#uploaded_file').get(0).outerHTML;
    window.validatePic = function () {
        valid = !($('#photo').val() && $('#uploaded_file').val());
        if (valid) {
            $('#realSubmit').click();
        } else {
            alert('Please choose only one image.');
            $('#photo').val('');
            $('#uploaded_file').after(orig);
            $('#uploaded_file').remove();
        }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>... other form options
    <br>
    <br>
    <label><b>URL Webcam Image:</b>

        <label />
        <p></p>
        <input type="text" name="photo" id="photo" class="input" />
        <p></p>
        <label><b>Upload</b>

            <label />
            <br/><span>JPG, max. 200 kb</span> 
            <input type='file' name='uploaded_file' id="uploaded_file" />
            <p></p>
            <button type="button" onclick="validatePic()">Submit</button>
            <button type="submit" id="realSubmit" style="display: none">hidden</button>
</form>

＆＃13;

JQuery验证：如果两个字段都是可选的，则会失败吗？

2 个答案: