Jquery 欧芹验证程序-至少需要一个字段

我的表单中有四个输入元素（即文本框），供用户输入不同的电话号码，如办公室、手机、家庭等（这些输入字段不一定在一个分区/组下）。在提交之前，我想验证这些电话号码输入，并确保用户至少输入了一个电话号码。如果“电话号码”字段中没有有效的条目，则我的表单不应得到验证，也不应发布

我使用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>

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

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

---

我从

中获取了上述脚本代码。在Parsley.js中还没有简单的条件验证方法。您可以查看以获取更多信息

您可能需要调整此代码以满足您的需要，但您可以这样做（）：

$（文档）.ready（函数（）{
$（“#演示表单”）.parsley（）.subscribe（'parsley:form:validate'，函数（formInstance）{
//如果这些字段中的任何一个有效
if（$（（“输入[name=field1]”）.parsley（）.isValid（）||
$（“输入[name=field2]”）.parsley（）.isValid（）||
$（“输入[name=field3]”。欧芹（）.isValid（）
$（“输入[name=field4]”）.parsley（）.isValid（）
{
//删除错误消息
$（'.invalid form error message'）.html（''）；
//从所有表单中删除所需的验证，以便提交表单
//我们已经验证了每个字段，因此填写了一个字段。
//另外，摧毁欧芹的目标
$（“输入[name=field1]”）。removeAttr（'required'）。parsley（）.destroy（）；
$（“输入[name=field2]”）。removeAttr（'required'）。parsley（）.destroy（）；
$（“输入[name=field3]”）。removeAttr（'required'）。parsley（）.destroy（）；
$（“输入[name=field4]”）。removeAttr（'required'）。parsley（）.destroy（）；
返回；
}
//如果没有有效项，则将验证添加到所有项中
$（“输入[name=field1]”）.attr（'required'，'required'）.parsley（）；
$（“输入[name=field2]”）.attr（'required'，'required'）.parsley（）；
$（“输入[name=field3]”）.attr（'required'，'required'）.parsley（）；
$（“输入[name=field4]”）.attr（'required'，'required'）.parsley（）；
//递交表格
formInstance.submitEvent.preventDefault（）；
//并显示一个温和的信息
$（'.无效的表单错误消息'）
.html（“必须正确填写这两个块中至少一个的字段！”）
.addClass（“已填写”）；
返回；
});
});

---

请注意，您需要向输入中添加

禁用的data parsley errors messages

，这样您就看不到每个输入的错误消息。

您可以添加到目前为止的代码吗？你面临的问题是什么？@milz刚刚在post中添加了代码片段。。

<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>