Question

简介

我正在开发一个wordpress网站，我有一个表格。该表单的验证是使用jQuery内联表单验证引擎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/

仅在填写上一个字段时必填的表单字段

1 个答案: