Javascript js根据所选单选按钮验证表单的各个部分

也许通过这把小提琴最容易解释：

我想根据选择的单选按钮显示/隐藏表单的各个部分。选中单选按钮时，我会显示一些额外的表单字段并隐藏其他字段。我只希望Parsley.js验证显示的字段

当所选单选按钮被更改并且欧芹验证已经运行时，我遇到了问题

//变量
var differences_fields=$（“#differences”）；
变量food_fields=$（“#food”）；
//隐藏字段直到需要
饮料。隐藏（）；
食物和田野；
$（“输入[name=choice]”。在（'单击'，函数（）上）{
如果（$（this.val（）=='饮料'）{
//显示饮料隐藏食物
饮料场。显示（）；
食物和田野；
//需要更新
$（“输入[名称=饮料]”）.prop（'required'，true）；
$（“输入[名称=食物]”）.prop（'required'，false）；
}else if（$（this）.val（）=='Food'）{
//展示食物和饮料
食物场。展示；
饮料。隐藏（）；
//需要更新
$（“输入[名称=食物]”）.prop（'required'，true）；
$（“输入[名称=饮料]”）.prop（'required'，false）；
}
});

选择
饮料
食物
饮料
水
百事可乐
橙汁
食物
蛋糕
热狗
披萨
提交
显示/隐藏字段后，需要重新绑定Parlsey

大概是这样的：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // your code
    } else if ( $(this).val() == 'Food' ) {
        // your code
    }

    $("form").parsley().destroy();

    $("form").parsley();
});

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // Show drinks hide food
        drinks_fields.show();
        drinks_fields.parsley();
        food_fields.hide();
        food_fields.parsley().destroy();
        // Update required
        $("input[name=drinks]").prop('required',true);
        $("input[name=food]").prop('required',false);
    } else if ( $(this).val() == 'Food' ) {
        // Show food hide drinks
        food_fields.show();
        food_fields.parsley();
        drinks_fields.hide();
        drinks_fields.parsley().destroy();
        // Update required
        $("input[name=food]").prop('required',true);
        $("input[name=drinks]").prop('required',false);
    }  
});

或者，可以为隐藏的字段销毁ParsleyField对象，并为显示的字段创建ParsleyField对象，如下所示：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // your code
    } else if ( $(this).val() == 'Food' ) {
        // your code
    }

    $("form").parsley().destroy();

    $("form").parsley();
});

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // Show drinks hide food
        drinks_fields.show();
        drinks_fields.parsley();
        food_fields.hide();
        food_fields.parsley().destroy();
        // Update required
        $("input[name=drinks]").prop('required',true);
        $("input[name=food]").prop('required',false);
    } else if ( $(this).val() == 'Food' ) {
        // Show food hide drinks
        food_fields.show();
        food_fields.parsley();
        drinks_fields.hide();
        drinks_fields.parsley().destroy();
        // Update required
        $("input[name=food]").prop('required',true);
        $("input[name=drinks]").prop('required',false);
    }  
});

有趣的例子和伟大的小提琴

现在2.0.6已经发布，如果您也相应地更改了
data parsley mincheck
属性，那么您的小提琴就可以工作了。以下是错误显示，但无法正常工作，不确定原因

您的问题通过删除必填字段来说明。它还以移除所有约束（这也带来了一些约束）为例进行了说明

这些错误在2.0.6中已修复

不过，还有另一种方式来看待这个问题。您可以简单地排除隐藏的输入，而不是更改字段的
必需的
属性：

jQuery("form").parsley({ excluded: ":hidden" });

完成。在这个例子中，错误消息不会显示出来，但我不知道为什么（我昨天才开始认真研究parlsey）。
是的，但我认为parlsey v2是为了避免这种情况。@Marc AndréLafortune，正如他们所说，这不是一个bug，这是一个特性：）问题是，当你将欧芹应用于表单时（在这种情况下，通过
data parsley validate=“true”
），parsley将为每个字段创建一个
ParsleyForm
对象和一个
ParsleyField
（未从配置中排除）。如果在运行过程中隐藏或显示字段，则ParsleyField会保留或根本不存在。这就是为什么需要销毁parsley并重新绑定它，因此它会销毁现有对象并创建新对象。解决此问题的另一种解决方案是，为每个隐藏字段和c销毁
ParsleyField
对象为每个显示的字段创建ParsleyField对象。查看更新的答案。对，但这两个都不是必需的。请查看我的更新答案以了解我发现的两个错误。在验证程序实例为crea时隐藏的所有元素中，似乎都缺少应该包含错误消息的ul.parsley-errors-list元素ted.我刚刚记录了一个问题，因为这显然是一个bug->