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

Posted 2023-05-09

【中文标题】仅当前一个字段已填写时才需要表单字段

【英文标题】：Required form field only if previous field is filled

【发布时间】：2013-08-06 03:27:06

【问题描述】：

简介

我正在开发一个有表格的 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 后台），但我不确定它是否是解决此问题的正确途径。

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

【问题讨论】：

使用相同的引号打开和关闭选择器。 .attr("class')，应该是.attr("class")。

很好看。但是，这不是我的真实代码，这只是一个示例。

我不知道“内联表单验证”，但从你所说的我假设它将所有元素推入 document.ready 的数组中。如果您只是检查必填字段中是否有内容，那么自己编写验证可以节省大量时间。

@Naoe 感谢您的回复，这听起来是个好主意。不幸的是，我目前没有时间或知识来做这样的事情，尽管我想这是我将来必须学习的东西。

好的，我已经为你添加了一个答案，如何创建一个简单的验证器。展示如何在不花费大量时间的情况下做到这一点。

【参考方案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/

【讨论】：

太棒了，谢谢！多亏了你，我的 jQuery 知识提高了很多。只是一件简单的事情我不明白：.trim 在这行代码if ($.trim($(this).val()) == '') 中的目的是什么？

.trim 函数删除字符串开头和结尾的空格。在这种情况下，我们使用它来确保只包含空格的字符串仍被视为空。