根据输入字段标签名称替换输入字段错误消息文本

Question

所以我有一个公司的帐户创建表格。这是它的样子：

我将首先解释一下此系统中的功能是如何工作的。

1. 创建公司后，将显示一个表格，列出我创建的所有公司。

2. 在此表的“操作”列中，有一个操作按钮，一旦我点击它，我将登录到我选择的特定公司，作为登录该公司的用户。

3. 在内部，更像是相同的布局，我可以创建一个名为＆＃34;运营商＆＃34;的子公司。

4. 所以有一个＆＃34;创建运营商＆＃34;按钮，一旦点击，我将被重定向到上面相同的表单布局（除了＆＃34;公司名称＆＃34;标签更改为＆＃34;运营商名称＆＃34;）。

5. 好吧，我正在使用 Yii2 php framework ，基本上，每个输入字段都是db表中的一个属性，在我的模型中，有一个名为{{1的函数其中每个属性都分配给特定标签。

6. 对于示例，第一个输入字段的db表属性名称为public function attributeLabels()，因此在此函数中，它被指定为company_name，此标签为传递给这种形式的视图。因此，只要有错误消息，就会使用此标签。

7. 无论我是创建公司还是运营商，错误消息始终＆＃34;公司名称不应为空白＆＃34;。我需要完成的是当我创建一个操作符时，错误信息应为＆＃34;操作员名称不应为空白。＆＃34;

我希望你能解决我的问题。所以我调整了一些 javascript / jQuery ，但我仍然遇到问题。

company_name => "Company Name"

我当前代码中的问题是：

1. 当我将操作员名称输入字段留空时，然后单击输入字段外的空白区域，错误消息仍然是＆＃34;公司名称不应为空白。＆＃34;

2. 但是当我点击返回输入字段时，错误消息更改为＆＃34;操作员名称不应为空白。＆＃34;

3. 真正发生的是，当我点击运营商名称输入字段，然后单点击外部或任何其他输入字段时，错误消息仍然是＆＃34;公司名称应该不要空白。＆＃34;，

4. 但是当我执行第二次点击时，错误消息会发生变化。

5. 点击返回到运营商名称输入字段时出现问题，因为它一直回到＆＃34;公司名称不应为空白＆＃34;单击时出现错误消息。

我希望你能解决我的问题。

编辑： Yii2生成的html看起来像这样：

// For changing Operator Name error message            
var operatorNameLabel = $('.field-company-company_name label').attr('for','company-company_name').text();
var companyNameErrorDiv = $(".field-company-company_name p");
var operatorNameMsg = 'Operator Name should not be blank.';

$('#submit-button').click(function() {
    // Change Operator Name error message
    if (operatorNameLabel == "Operator Name") {
        companyNameErrorDiv.html("<p class='help-block help-block-error'>Operator Name should not be blank</p>");
        //companyNameErrorDiv.text(operatorNameMsg);
    }
});

$('#content-offset').click(function () { 
    if (operatorNameLabel == "Operator Name") {
        companyNameErrorDiv.html("<p class='help-block help-block-error'>Operator Name should not be blank</p>");
        //companyNameErrorDiv.text(operatorNameMsg);
    }
});

Answer 1

尝试将required属性添加到input元素，data-*元素label元素;当css无效时，:invalid :after，content伪元素，label属性input显示消息。

input:invalid + label:after {
  content: " " attr(data-name) " should not be blank";
  color: red;
}

<input type="text" name="company_name" required /><label data-name="Company Name"></label><br>
<input type="text" name="login_name" required /><label data-name="Login Name"></label><br>
<input type="email" name="email" required /><label data-name="Email"></label><br>
<input type="password" name="password" required /><label data-name="Password"></label><br>
<input type="password" name="password_confirm" required /><label data-name="Password Confirm"></label>