Question

我有一个表单，要求用户在提交之前单击复选框。如果用户未选中该框，则提示我显示错误消息。目前如果我一直点击该消息继续添加。如何更改此设置，使其仅显示一次。

    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;
      }
    }

Answer 1

虽然这个解决方案可能需要额外的工作并改变一些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更快

Answer 2

每次发生错误时，您似乎都在附加HTML和其他HTML div。所以每个错误都会添加另一个div。通常人们通过在原始标记中使用应用了默认hidden CSS类的错误Div来解决此问题。当用户发出错误时，hidden类被删除。修复错误后，将重新添加hidden类。

.hidden{
  display:none;
}

您似乎也在使用jQuery，因此您只需使用show() / hide()方法。

Answer 3

所以我理解，如果您多次点击，它会多次显示相同的消息。

您可以检查元素是否已经有类has-error。

这样的事情：

{{1}}

Answer 4

您可以使用#html方法，而不是使用#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;
  }
}

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

Answer 5

$(document).ready(function(){
    $('#submit').click(function(){
        if(!$('#checkbox').is(':checked')) {
           alert("You must check the checkbox"); 
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="checkbox"/>

<button id="submit">Submit</button>

Answer 6

您需要检查是否已将消息附加到#agree_to_terms_label的父级以附加错误消息。

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>'
  );
}

此处示例：

https://jsfiddle.net/he5cx50m/

Answer 7

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

表单上的复选框提交：错误一直显示在按钮单击上

7 个答案: