仅当前一个字段已填写时才需要表单字段

Question

简介

我正在开发一个有表格的 wordpress 网站。该表单的验证是使用 jQuery Inline Form Validation Engine 2.2 进行的。

我有一些单选按钮有两个选项是/否，然后是一个必填字段，只有在有人选择“否”时才会出现，以解释原因。类似于以下示例：

1 - “John Matrix”比“John Rambo”更酷吗？

→ 是的

     否

 

2 - “突击队”是有史以来最好的电影吗？

    是的

→ 没有

为什么不呢？ _____________________________（* 必填)

所以，如果有人说“不”，就会出现“为什么不”字段：

if( $('#no_commando_field').is(':checked')) {
    $('#why_not_field').show();
} else {
    $('#why_not_field').hide();
}

 

问题

我的问题是“为什么不”字段是必需的，即使有人选择了“是”选项（就像它应该做的那样）。仅当先前的答案为“否”时，我才希望将此字段设为必填。

寻求解决问题

在探索代码时（我不是后端专家），我意识到内联表单验证引擎向必填字段添加了一个类，称为“validate[required]”。我尝试使用 jQuery 删除该类，但验证仍然发生。

var validate;
validate = $('#why_not_field').attr('class');
validate = validate.replace('validate[required]','not_validated');
$('#why_not_field').attr('class',validate);

if ( $('#no_commando_field').is(':checked')) {
    validate = validate.replace('not_validated','validate[required]');
    $('#why_not_field').attr('class',validate);
} else {
    validate = validate.replace('validate[required]','not_validated');
    $('#why_not_field').attr('class',validate);
}

类交换工作正常，但验证仍在进行中。尽管此解决方案在以前的表单上对我有用（仅在 wordpress 后台），但我不确定它是否是解决此问题的正确途径。

我希望有人指出我正确的方向，以便我可以更好地理解这个问题，以便解决它。提前致谢。

Answer 1

这是一种仅使用 jquery 检查必填字段的简单方法。

只需将此代码放入您的$(document).ready(function () { });

$('#SubmitButton').click(function (e) {
    var isValid = true;

    //checks go here

    if (isValid == false) {
        e.preventDefault();
    }
});

将 jquery 代码或 html 代码更改为 SubmitButton，以便在提交时触发事件。

对于必填字段，只需输入类required。

然后对required 类进行以下检查：

检查单选按钮

    $('input:radio.required').each(function() {
        nam = $(this).attr('name');
        if ($(':radio[name="'+nam+'"]:checked').length < 1) {             
            $(':radio[name="' + nam + '"]').parent('td').css({
                "border": "1px solid red",
                "background": "#FFCECE"
            });
            isValid = false;
        } else {
            $(':radio[name="' + nam + '"]').parent('td').css({
                "border": "",
                "background": ""
            });
        }
    });

检查文本框

    $('input:text.required').each(function () {
        if ($.trim($(this).val()) == '') {
            isValid = false;
            $(this).css({
                "border": "1px solid red",
                "background": "#FFCECE"
            });
        }
        else {
            $(this).css({
                "border": "",
                "background": ""
            });
        }
    });

这里我正在改变字段的背景，但你可以做任何你想做的事情。

通过这种方式，所有检查都在最后完成，因此您可以在此人通过表单时添加和删除 required 类。

这是一个小提琴演示： http://jsfiddle.net/SCBTj/

编辑：

为了回答您的最初的问题，这里有一个演示：

http://jsfiddle.net/SCBTj/2/