Parsley Validator-至少需要一个字段 [英] Parsley Validator - At least one field is required

问题描述

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

I have four input elements (i.e. textboxes) in my form for user to enter different phone nos i.e. office, handphone, home, etc. (These input fields are not necessarily under one div/group) Before submit, I want to validate these phone no. entries and make sure that atleast one of the phone no is entered by user. If none of the phone no. field has valid entry my form should not get validated and should not post.

我使用ParsleyJS库进行验证，并使用基因敲除.js.

I use ParsleyJS library for validation and use 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.

I have given id to my input i.e. "handphone" in above code.

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;
    });
});

使用上述脚本代码，它可以检测到无效的情况，但不会阻止表单提交.

With above script code it can detect the invalid scenario but doesn't prevent the form submit.

我从此处

推荐答案

Parsley.js中尚无简单的条件验证方法.您可以查看马克的答案以获取更多信息.

There is no simple way for conditional validation in Parsley.js yet. You can take a look at Marc's answer for additional information.

您可能需要调整此代码以满足您的需要，但是您可以执行以下操作( jsfiddle ):

You'll probably need to tweak this code to suit your needs, but you could do something like this (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 ，因此您不会看到每个错误消息.

Note that you need to add data-parsley-errors-messages-disabled to your inputs, so you don't see the error message of each.

这篇关于Parsley Validator-至少需要一个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！