如何清除选择框的验证？

Question

我现在的问题是当用户没有选择任何一个选择时，我点击下一步按钮后，选择框的验证就会出来，但是如果我在下一步按钮上单击更多次，验证就会保留出来出来。

在我的页面中，由一个选择框和一个输入框组成，输入框的验证无论我点击几次NEXT按钮都只出现一次，但选择框没有。

谁能帮帮我？

这是我的代码：

$('#btnNextContactInfoModel').off('click').click(function() {
  var focusSet = false;
  if (!$('#contact123').val() || !$('#contacttype').val()) {
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added
    {
      $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }
    if ($("#contacttype").parent().next(".validation").value == undefined) // only add if not added
    {
      $("#contacttype").after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }

    e.preventDefault(); // prevent form from POST to server
    $('#contact123').focus();
    $('#contacttype').focus();
    focusSet = true;
  } else {
    $("#contact123").parent().next(".validation").remove();
    $("#contacttype").parent().before(".validation").remove(); // remove it
  }

  $("#contactInfoModel").closeModal();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="selectcontacttype" class="input-field col s12 m3 l3">
    <select id="contacttype" name="contactselection">
      <option value="" disabled selected>Please select</option>
      <option value="1">Type 1</option>
      <option value="2">Type 2</option>
      <option value="3">Type 3</option>
      <option value="4">Type 4</option>
      <option value="5">Type 5</option>
    </select>
    <label data-i18n="personal-particular-update.msg_type"></label>
  </div>
  <div class="input-field col s12 m3 l3">
    <label class="active" for="ContactInfo">Contact Info</label>
    <div id="Contact Info">
      <input id="contact123" name="contactsTypes" type="text">
    </div>
  </div>
  <input type="hidden" id="storeType" />
  <input type="hidden" id="storecontactinfo" />
</div>

<div class="modal-footer">
  <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
    NEXT
  </button>
  <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
    Close
  </button>
</div>

Answer 1

在 $('#contacttype') 下方发生消息时，您只是忘记了 .parent() ：

$('#btnNextContactInfoModel').off('click').click(function() {
  var focusSet = false;
  if (!$('#contact123').val() || !$('#contacttype').val()) {
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added
    {
      $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }
    if ($("#contacttype").parent().next(".validation").length == 0) // only add if not added
    {
      $("#contacttype").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }

    e.preventDefault(); // prevent form from POST to server
    $('#contact123').focus();
    $('#contacttype').focus();
    focusSet = true;
  } else {
    $("#contact123").parent().next(".validation").remove();
    $("#contacttype").parent().next(".validation").remove(); // remove it
  }

  $("#contactInfoModel").closeModal();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div id="selectcontacttype" class="input-field col s12 m3 l3">
    <select id="contacttype" name="contactselection">
      <option value="" disabled selected>Please select</option>
      <option value="1">Type 1</option>
      <option value="2">Type 2</option>
      <option value="3">Type 3</option>
      <option value="4">Type 4</option>
      <option value="5">Type 5</option>
    </select>
    <label data-i18n="personal-particular-update.msg_type"></label>
  </div>
  <div class="input-field col s12 m3 l3">
    <label class="active" for="ContactInfo">Contact Info</label>
    <div id="Contact Info">
      <input id="contact123" name="contactsTypes" type="text">
    </div>
  </div>
  <input type="hidden" id="storeType" />
  <input type="hidden" id="storecontactinfo" />
</div>

<div class="modal-footer">
  <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
    NEXT
  </button>
  <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
    Close
  </button>
</div>

Answer 2

这是你的答案.. 我刚刚添加了验证的长度，如果长度为0则添加验证消息，否则不会添加消息。

$('#btnNextContactInfoModel').off('click').click(function() {
  var focusSet = false;
  if (!$('#contact123').val() || !$('#contacttype').val()) {
    if ($("#contact123").parent().next(".validation").length == 0) // only add if not added
    {
      $("#contact123").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }
    if ($("#contacttype").parent().find(".validation").value == undefined && $("#contacttype").parent().find(".validation").length == 0) // only add if not added
    {
    debugger;
      $("#contacttype").after("<div class='validation' style='color:red;margin-bottom: 20px;'>This field is required.</div>");
    }

    e.preventDefault(); // prevent form from POST to server
    $('#contact123').focus();
    $('#contacttype').focus();
    focusSet = true;
  } else {
    $("#contact123").parent().next(".validation").remove();
    $("#contacttype").parent().before(".validation").remove(); // remove it
  }

  $("#contactInfoModel").closeModal();
})

这里是 jsFiddle 链接：click here