表单提交的复选框:点击按钮时显示错误

Checkbox on form submit: error keeps displaying on button click

本文关键字：按钮 显示 错误 复选框 表单提交      更新时间：2023-09-26

我有一个表单，它要求用户在提交之前单击一个复选框。在提交时，如果用户没有选中这个框，我将显示一条错误消息。目前，如果我一直点击消息不断增加。我如何改变它，使它只显示一次。

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

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


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

您可以将这些HTML保留在表单本身。切换类将比更改DOM

更快。

看起来好像每次出现错误时都要追加一个额外的HTMLdiv。所以每个错误都会添加另一个div。通常人们通过在原始标记中使用默认的hidden CSS类来解决这个问题。当用户出错时，hidden类被移除。当错误是固定的hidden类被添加回来。

.hidden{
  display:none;
}

它看起来也像你在使用jQuery，所以你可以只使用show()/hide()方法代替

所以我明白，如果你点击多次，它会显示不止一次相同的消息。

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

像这样:

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

不使用#append方法，可以使用#html方法，如下所示:

    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调用以提高性能，请查看这篇文章。

$(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>

您需要检查是否已经将消息附加到用于附加错误消息的#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/

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

var isErrorMsgDisplayed = false; onFormSubmit : function(isFormValid, event){ if ($('#agree_to_terms_join').prop('checked')) { $('#agree_to_terms_label').parent().removeClass('has-error').find('.error').remove(); isErrorMsgDisplayed = false; } else { if(!isErrorMsgDisplayed){ $('#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>' ); isErrorMsgDisplayed = true; } return false; } }

相关文章：