Parsley Validator - 至少需要一个字段

Question

我的表单中有四个输入元素（即文本框）供用户输入不同的 phone 编号，即办公室、手phone、家等（这些输入字段不一定在下面一个 div/group) 在提交之前，我想验证这些 phone 没有。条目并确保至少有一个 phone 没有被用户输入。如果none的phone没有。字段具有有效条目我的表单不应该得到验证并且不应该 post.

我使用 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 中还没有简单的条件验证方法。您可以查看了解更多信息。

您可能需要调整此代码以满足您的需要，但您可以这样做 (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 - 至少需要一个字段

Parsley Validator - At least one field is required

validation

asp.net-mvc

jquery

parsley.js