Question

我的表单中有四个输入元素（即文本框），供用户输入不同的手机号码，如办公室，手机，家庭等。（这些输入字段不一定在一个div / group下）提交之前，我想要验证这些电话没有。输入并确保用户输入至少一个电话号码。如果没有电话没有。字段有效输入我的表单不应该验证，不应发布。

我使用ParsleyJS库进行验证并使用knockout.js。

我在Razor视图中有一个字段的代码（其余三个字段与此类似）：

        <div class="col-md-3 clmargin">
            <div class="form-group col-md-4 zeropadding div2adjustments">
                @Html.LabelFor(m => m.Handphone, new { @class = "fieldtext" })
            </div>
            <div class="col-md-8 ">
                <input type="text" class="form-control fieldtextinput input-sm" maxlength="10" minlength="8" data-parsley-type="digits"
                       data-bind="value:Handphone, disable:ViewMode() == 'View'" id="handphone">
            </div>
        </div>

我已将id输入到我的输入中，即上述代码中的“handphone”。

Javascript代码：

$(document).ready(function () {
    $('#contact').parsley().subscribe('parsley:form:validate', function (formInstance) {

        // if one of these blocks is not failing do not prevent submission
        // we use here group validation with option force (validate even non required fields)
        if (document.getElementById("other").value == '' && document.getElementById("telephone").value == '' &&
            document.getElementById("office").value == '' && document.getElementById("handphone").value == ''){
            // else stop form submission
            formInstance.submitEvent.preventDefault();
            // and display a gentle message
            $('.invalid-form-error-message')
                .html("Provide atleast one contact no")
                .addClass("filled");
            return;
        }
        $('.invalid-form-error-message').html('');
        return;
    });
});

使用上面的脚本代码，它可以检测到无效的方案，但不会阻止表单提交。

我已从here

获取上述脚本代码

Answer 1

Parsley.js中没有简单的条件验证方法。您可以查看Marc's answer以获取更多信息。

您可能需要调整此代码以满足您的需求，但您可以执行以下操作（jsfiddle）：

<div class="invalid-form-error-message"></div>
<form id="demo-form">
    <input type="text" name="field1" required data-parsley-errors-messages-disabled />
    <input type="text" name="field2" required data-parsley-errors-messages-disabled />
    <input type="text" name="field3" required data-parsley-errors-messages-disabled />
    <input type="text" name="field4" required data-parsley-errors-messages-disabled />
    <input type="submit" />
</form>

<script>
$(document).ready(function() {
    $('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) {
        // If any of these fields are valid
        if ($("input[name=field1]").parsley().isValid() || 
            $("input[name=field2]").parsley().isValid() || 
            $("input[name=field3]").parsley().isValid() || 
            $("input[name=field4]").parsley().isValid()) 
        {
            // Remove the error message
            $('.invalid-form-error-message').html('');

            // Remove the required validation from all of them, so the form gets submitted
            // We already validated each field, so one is filled.
            // Also, destroy parsley's object
            $("input[name=field1]").removeAttr('required').parsley().destroy();
            $("input[name=field2]").removeAttr('required').parsley().destroy();
            $("input[name=field3]").removeAttr('required').parsley().destroy();
            $("input[name=field4]").removeAttr('required').parsley().destroy();

            return;
        }

        // If none is valid, add the validation to them all
        $("input[name=field1]").attr('required', 'required').parsley();
        $("input[name=field2]").attr('required', 'required').parsley();
        $("input[name=field3]").attr('required', 'required').parsley();
        $("input[name=field4]").attr('required', 'required').parsley();

        // stop form submission
        formInstance.submitEvent.preventDefault();

        // and display a gentle message
        $('.invalid-form-error-message')
            .html("You must correctly fill the fields of at least one of these two blocks!")
            .addClass("filled");
        return;
    });
});
</script>

请注意，您需要在输入中添加data-parsley-errors-messages-disabled，因此您没有看到每个输入的错误消息。

Parsley Validator - 至少需要一个字段

1 个答案: