Question

我想在用户将引用字段留空时添加错误消息。当用户输入有效的参考号时，将出现一个表格。但是，我希望我的验证停止显示表单，并在字段留空时显示错误消息。

＆＃13;

$(document).ready(function() {
  $("#search").on('click', function() {
    if ($('#ref').val() == '') {
      $('label[for="ref"]').addClass("errorMsg");
    } else {
      $('label[for="ref"]').removeClass("errorMsg");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>
  <button type="button" id="search">Search</button>
</form>
<form>
  <!--form appears when users click search-->
</form>

＆＃13;

Answer 1

因此，如果我让你更正，你想隐藏并在值不是数字或空时显示消息。

所以我为你做了这个检查是否值是一个数字（空的意思不是一个数字）

#form {
    display: none;
}
.errorMsg {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
    <label for="ref">Booking Reference</label>
    <br>
    <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg"></span>
    <button type="button" id="search">Search</button>
</form>

<div id="form">
    This is my form...
</div>

{{1}}

Answer 2

如果我理解正确，您可以使用toggleClass根据条件切换课程（在这种情况下，如果搜索字词不为空）。这样，您还可以使用toggle方法切换错误消息的可见性。另外，我假设您要在标签上切换类以将其设置为错误，因此我采用了这种方式：

＆＃13;

$(document).ready(function() {
  $("#search").on('click', function() {
    var isValid = $('#ref').val() == '';
    $('label[for="ref"]').toggleClass('error', isValid);
    $('.errorMsg').toggle(isValid);
  });
});

＆＃13;

.error {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref" class="error">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number required</span>
  <button type="button" id="search">Search</button>
</form>
<form>
  <!--form appears when users click search-->
</form>

＆＃13;

Answer 3

您也可以通过addclass或删除类

来尝试此方法

if (!!window.MSInputMethodContext && !!document.documentMode) {//if IE11
    $(".flex-child").each(function (i, elem) {
        var $flex_child = $(elem);
        var child_id = $flex_child.attr("id");

        //add resize event to window
        $(window).on("resize." + child_id, function () {
            var width_of_flex_child = $flex_child.outerWidth();
            var content_width = $flex_child.children(".content-container").outerWidth();

            if (width_of_flex_child < content_width) {
                $flex_child.css("min-width", content_width + "px");

                //remove event
                $(window).off("resize." + child_id);
            }
        }).trigger("resize." + child_id);
    });
}

使用addClass进行jQuery验证

3 个答案: