JQuery Remove Validation

Question

I have a list to choose from and a set of Yes/No radio buttons inside a form.

Validations will be alerted if I hit submit without picking anything on the list and without choosing Yes/No.

Now as soon as I pick something on the list, I want this validation disappear right away as well as a validation in Yes/No radio buttons will disappear as soon as I pick one. I wrote some Jquery code to get them disappear, but they are still there!

Please help. Thanks!

jsfiddle

JS

 $(function() {
            $('.field-store').click(function(){
                $('.dropdown-menu').slideToggle('fast');
        })
      $('.dropdown-menu input').click(function() {
          $('.txt-title').hide();
          var inputName = $(this).attr('name');
          if($(this).prop('checked')){
             $('.multi-selects').append('<span>'+ inputName + '</span>' );
          }else{ 
            $('.multi-selects span:contains('+inputName+')').remove()
        } 
      }) 

      function validateForm() {
        val = true;
                    var multiselectReq = $('.field-store').is('span');
                    if (!multiselectReq) {
                    $('.field-store').siblings(".error-message").addClass('alert-on');
                    val = false;
                }
                if ($('input[type=radio][name=yesno]:checked').length == 0) {
                        $('#yesnoquestion').children(".error-message").addClass('alert-on');
                        val = false;
                    }

            return val;
    }
//Below is code to remove validations
    $(function () {
        $("input").on("change keyup paste", function () {
            if (!$(this).val()) { $(this).siblings('.error').addClass('alert-on'); }
            else { $(this).siblings('.error').removeClass('alert-on'); }

            var multiselectReq = $('.field-store').is('span');
                    if (multiselectReq) {
                    $('.field-store').siblings(".error-message").removeClass('alert-on');
                    val = true;
                }

             if ($('input[type=radio][name=yesno]:checked').length > 0) {
                        $('#yesnoquestion').children(".error-message").removeClass('alert-on');
                val = true;
              }

        });

        $("#form").submit(function (event) {
            if (validateForm()) {
                return;
            };
            event.preventDefault();
        });
    })

    })

HTML

      <form id="form" >
        <div class="field-store">
          <div class="txt-title">Pick what you like</div>
          <span class="multi-selects"></span>
        </div>
        <div class="error-message">Required*</div>
        <ul class="dropdown-menu">
          <li>
            <input type="checkbox" name="cheese">Cheese</input>
          </li>
          <li>
            <input type="checkbox" name="tomatoes">Tomatoes</input>
          </li>
          <li>
            <input type="checkbox" name="mozarella">Mozzarella</input>
          </li>
          <li>
            <input type="checkbox" name="mushrooms">Mushrooms</input>
          </li>
          <li>
            <input type="checkbox" name="pepperoni">Pepperoni</input>
          </li>
          <li>
            <input type="checkbox" name="onions">Onions</input>
          </li>
        </ul>

  <p id="yesnoquestion">
        <div>
  <input type="radio" id="answer-yes" name="yesno" value="Yes">
  <label>Yes</label>
</div>

<div>
  <input type="radio" id="answer-no" name="yesno" value="No">
  <label>No</label>
</div>

  <div class="error-message">Required*</div>

 </p>

        <div id="form_submit">
          <button type="submit">
            Submit
          </button>
        </div>
        </form>

CSS

.field-store {
  width: 50%;
  height: 40px;
  background: white;
  border: 1px solid black;
}
.dropdown-menu {
  display: none;
}

.error-message {
  color: red;
  display: none;
}
.alert-on {
  display: block;
}

Answer 1

I've briefly cleaned up the javascript and html. I also made minimal changes just to get the desired output.

$(function() {
  var submitted = false;
  
  $('.field-store').click(function() {
    $('.dropdown-menu').slideToggle('fast');
  });

  $('.dropdown-menu input').click(function() {
    $('.txt-title').hide();
    var inputName = $(this).attr('name');
    if ($(this).prop('checked')) {
      $('.multi-selects').append('<span>' + inputName + '</span>');
    } else {
      $('.multi-selects span:contains(' + inputName + ')').remove()
    }
  });

  $("input").on("change keyup paste", function() {
    if (submitted === true) {
  	  validateForm();
    }
  });

  $("#form").submit(function(event) {
    event.preventDefault();
    validateForm();
    submitted = true;
  });
});

function validateForm() {
  var multiselectReq = $("input[type='checkbox']:checked").length === 0;
  var yesnoReq = $("input[name='yesno']:checked").length === 0;
  
  if (multiselectReq) {
    $('.field-store').children(".error-message").addClass('alert-on');
  } else {
	  $('.field-store').children(".error-message").removeClass('alert-on');
  }
  
  if (yesnoReq) {
  	$('#yesnoquestion').children(".error-message").addClass('alert-on');
  } else {
    $('#yesnoquestion').children(".error-message").removeClass('alert-on');
  }
}

.field-store {
  width: 50%;
  height: 40px;
  background: white;
  border: 1px solid black;
}
.dropdown-menu {
  display: none;
}

.error-message {
  color: red;
  display: none;
}
.alert-on {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" >
  <div class="field-store">
    <div class="txt-title">Pick what you like</div>
    <span class="multi-selects"></span>
    <div class="error-message">Required*</div>
  </div>
  <ul class="dropdown-menu">
    <li>
      <input type="checkbox" name="cheese">Cheese</input>
    </li>
    <li>
      <input type="checkbox" name="tomatoes">Tomatoes</input>
    </li>
    <li>
      <input type="checkbox" name="mozarella">Mozzarella</input>
    </li>
    <li>
      <input type="checkbox" name="mushrooms">Mushrooms</input>
    </li>
    <li>
      <input type="checkbox" name="pepperoni">Pepperoni</input>
    </li>
    <li>
      <input type="checkbox" name="onions">Onions</input>
    </li>
  </ul>
  <div id="yesnoquestion">
    <div>
      <input type="radio" id="answer-yes" name="yesno" value="Yes">
      <label>Yes</label>
    </div>
    <div>
      <input type="radio" id="answer-no" name="yesno" value="No">
      <label>No</label>
    </div>
    <div class="error-message">Required*</div>
  </div>
  <div id="form_submit">
    <button type="submit">
    Submit
    </button>
  </div>
</form>

If you want your other issues on getting the dropdown to appear/work correctly, please create a separate issue since it's out of scope of this question.