Javascript 表单提交上的复选框：单击按钮时会显示错误

我有一个表单，要求用户在提交前单击复选框。提交时，如果用户未选中此框，我将显示一条错误消息。当前，如果我继续单击，则消息将继续添加。如何更改此选项，使其仅显示一次

    onFormSubmit : function(isFormValid, event){
      if ($('#agree_to_terms_join').prop('checked')) {
        $('#agree_to_terms_label').parent().removeClass('has-error').find('.error').remove();
      } else {
        $('#agree_to_terms_label').parent().addClass('has-error').append(
          '<div class="textbox-alert help-block error"  style="display: block;">' +
            '<div class="type" style="display: block;">Message goes here</div>' +
          '</div>'
        );
        return false;
      }
    }

onFormSubmit:函数（isFormValid，事件）{ 如果（$（'agree_to_terms_join'）.prop（'checked'））{ $（“#同意_to_terms_label”）.parent（）.removeClass（'has-error'）.find（'.error'）.remove（）； }否则{ $（'#同意_-terms_-label'）.parent（）.addClass（'has-error'）.append( '' + “信息在这里传递”+ '' ); 返回false； } }

---

每次出现错误时，您似乎都在追加和添加HTML div。因此，每个错误都会添加另一个div。通常，人们通过在原始标记中使用默认的

隐藏的
CSS类来解决这个问题。当用户出错时，
隐藏的
类将被删除。当错误被修复后，
隐藏的
类被重新添加

.hidden{
  display:none;
}

看起来您正在使用jQuery，所以您可以直接使用这些方法。
因此我知道，如果您多次单击，它会多次显示相同的消息

您可以检查元素是否已经有类错误

大概是这样的：

onFormSubmit : function(isFormValid, event) {
  if ($('#agree_to_terms_join').prop('checked')) {
      $('#agree_to_terms_label').parent().removeClass('has-error').find('.error').remove();
  } else {
      if (!$('#agree_to_terms_label').parent().hasClass('has-error')) {
          $('#agree_to_terms_label').parent().addClass('has-error').append(
            '<div class="textbox-alert help-block error"  style="display: block;">' +
              '<div class="type" style="display: block;">Message goes here</div>' +
            '</div>'
          );
      }
      return false;
  }
}

onFormSubmit:函数（isFormValid，事件）{
如果（$（'agree_to_terms_join'）.prop（'checked'））{
$（“#同意_to_terms_label”）.parent（）.removeClass（'has-error'）.find（'.error'）.remove（）；
}否则{
如果（！$（'#同意条款_标签'）.parent（）.hasClass（'has-error'））{
$（'#同意_-terms_-label'）.parent（）.addClass（'has-error'）.append(
'' +
“信息在这里传递”+
''
);
}
返回false；
}
}
不使用
#append
方法，您可以使用如下方法：

    onFormSubmit : function(isFormValid, event){
  if ($('#agree_to_terms_join').prop('checked')) {
    $('#agree_to_terms_label').parent().removeClass('has-error').find('.error').remove();
  } else {
    $('#agree_to_terms_label').parent().addClass('has-error').html(
      '<div class="textbox-alert help-block error"  style="display: block;">' +
        '<div class="type" style="display: block;">Message goes here</div>' +
      '</div>'
    );
    return false;
  }
}

onFormSubmit:函数（isFormValid，事件）{
如果（$（'agree_to_terms_join'）.prop（'checked'））{
$（“#同意_to_terms_label”）.parent（）.removeClass（'has-error'）.find（'.error'）.remove（）；
}否则{
$（“#同意_to_terms_label”）.parent（）.addClass（'has-error'）.html(
'' +
“信息在这里传递”+
''
);
返回false；
}
}

---

我还建议您缓存jquery调用以提高性能，请检查。

虽然此解决方案可能需要额外工作和更改一些html，但这是更好的方法：

• 将html块保留在表单本身中
• 并使用CSS根据错误切换可见性

JS

onFormSubmit: function(isFormValid, event) {
    var elem = $('#agree_to_terms_label');
    elem.is(":checked") ? elem.parent().removeClass("error"):elem.parent().addClass("error");
}

CSS:

.has-error .error {
    display: block;
}

.error {
    display: none;
}

HTML

<div class="textbox-alert help-block error">
    <div class="type" style="display: block;">Message goes here</div>
</div>

信息就在这里

您可以将此HTML保存在表单本身中。切换类将比更改DOM更快

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
如果（！$（'#复选框'）。是（':checked'））{
警告（“您必须选中复选框”）；
}
});
});

提交
您需要检查是否已将消息附加到“同意”至“条款”标签的父项，以附加错误消息

if ($('#agree_to_terms_label+div.error').length == 0) {
  $('#agree_to_terms_label').parent().addClass('has-error').append(
    '<div class="textbox-alert help-block error"  style="display: block;">' +
    '<div class="type" style="display: block;">Message goes here</div>' +
    '</div>'
  );
}

if（$（'#agree_to_terms_label+div.error'）。长度==0）{
$（'#同意_-terms_-label'）.parent（）.addClass（'has-error'）.append(
'' +
“信息在这里传递”+
''
);
}

示例如下：

您可以使用变量检查消息是否已显示

var-isErrorMsgDisplayed=false；
onFormSubmit:函数（isFormValid，事件）{
如果（$（'agree_to_terms_join'）.prop（'checked'））{
$（“#同意_to_terms_label”）.parent（）.removeClass（'has-error'）.find（'.error'）.remove（）；
isErrorMsgDisplayed=false；
}否则{
如果（！isErrorMsgDisplayed）{
$（'#同意_-terms_-label'）.parent（）.addClass（'has-error'）.append(
'' +
“信息在这里传递”+
''
);
isErrorMsgDisplayed=真；
}
返回false；
}
}