bunnycode bunnycode - 1 month ago 4
Javascript Question

Make only targeted li disappear/reappear on field change?

When you first visit the fiddle and hit "Continue", a list appears at the top with collected validation error messages.

If you type into the First Name field, the corresponding "1. Enter your first name" should disappear (and should reappear when the First Name field is empty). Same action should happen for other valid fields on page - when invalid,

li
item notification should appear. When field has input, notification (and number) should disappear.

But when one field is affected, the whole list disappears. What is causing this? How would I modify my jQuery to target only a single corresponding item (and number) on the list vs the whole list?

(The display:none/display: inline on the error labels are generated by jquery validation)

<ol class="error-message-container error-menu">
<li><a href="#firstName"><label class="error" for="firstName" generated="true"></label></a></li>
<li><a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>

$('input, ul.dropdown-menu li, .form-inline').on('change', function() {
if($('li a label').css('display') == 'none'){
$('.error-menu li a label').closest('li').hide('slow');
} else {
$('.error-menu li a label').closest('li').show('slow');
}
});


Tried this but it's obviously not working. Any help modifying this?

$('input, ul.dropdown-menu li, .form-inline').on('change', function() {
var labelCheck = $('.error-menu li a label');
if($(labelCheck).css('display') == 'none'){
$(this).closest('li').hide('slow');
} else {
$(this).closest('li').show('slow');
}
});


Fiddle: https://jsfiddle.net/DTcHh/25922/

Answer

Whenever you change or modify an input or select field a validation can be requested to the plugin. If the result is "form valid" you may hide the error menu. Otherwise in this way you trigger the invalidHandler event for the validator. Inside this event you may hide the valid fields.

So, you may reduce all to this function:

$('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
        $('.error-menu li').hide();
    }
});

And, inside the $("#form-jsvalidate").validate({ you need to add:

invalidHandler: function(event, validator) {
        if (validator.errorList.length > 0) {
            $('.error-menu li').show();
        }
        validator.successList.forEach(function(element, index) {
            $('.error-menu li a[href="#' + $(element).prev().attr('for') 
                  + '"]').closest('li').hide();
        });
    }

The snippet:

function save_page(obj) {

}
$(function () {
  $("#form-jsvalidate").validate({
    rules: {
      "firstName": {
        required: true
      },
      "lastName": {
        required: true
      },
      "dobMonth": {
        required: true
      },
      "country": {
        required: true
      }
    },
    messages: {
      "firstName": {
        required: "Enter your first name"
      },
      "lastName": {
        required: "Enter your last name"
      },
      "dobMonth": {
        required: "Enter the month you were born"
      },
      "country": {
        required: "Country is required"
      }
    },
    invalidHandler: function(event, validator) {
      if (validator.errorList.length > 0) {
        $('.error-menu li').show();
      }
      validator.successList.forEach(function(element, index) {
        $('.error-menu li a[href="#' + $(element).prev().attr('for') + '"]').closest('li').hide();
      });
    }
    /*submitHandler: function (form) {
                 alert('valid');
                 return false;
                 }*/
  });

  $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)';

  $('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
      $('.error-menu li').hide();
    }
  });

  $('.btn-submit-val').on('click', function() {
    $("#form-jsvalidate").valid();
    return false;
  });

  $('.error-menu').show();
  $("#form-jsvalidate").valid();
});
body {
  margin: 10px;
}

.error-message-container {
  background: cornflowerblue;
}

.error-message-container ol li a label {
  display: inline;
  margin: 0;
  text-decoration: underline;
  font-weight: normal;
  color: pink;
}

label.error {
  color: red;
}

input.error,
select.error,
.input-validation-error button {
  border: 1px solid red !important;
}
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: auto !important;
}


ol.error-menu {
  display: none;
}

li {
  margin-left: 20px;
  list-style-type:decimal;
}

.hidethis {
  display: none;
}

.showthis {
  display: list-item;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>

<form id="form-jsvalidate" action="/" method="post">

    <ol class="error-message-container error-menu">
        <li><a href="#firstName"><label class="error" for="firstName" generated="true"></label></a></li>
        <li><a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
        <li><a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a>
        <li><a href="#country"><label class="error" for="country" generated="true"></label></a>
    </ol>

    <div class="form-group">
        <label for="firstName" class="control-label">First Name</label>
        <label class="error" for="firstName" generated="true"></label>
        <input type="text" class="form-control" id="firstName" name="firstName" />
    </div>

    <div class="form-group">
        <label for="lastName" class="control-label">Last Name</label>
        <label class="error" for="lastName" generated="true"></label>
        <input type="text" class="form-control store" name="lastName" value="" />
    </div>

    <div class="form-group">
        <label class="error" for="dobMonth" generated="true"></label>
        <select name="dobMonth" id="dobMonth" class="required selectpicker">
            <option value="">Month</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
        </select>
    </div>

    <div class="form-group">
        <label class="error" for="country" generated="true"></label>
        <select name="country" id="country" class="required selectpicker">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
        </select>
    </div>

    <div class="form-group form-group-button-section">
        <a href="/" type="submit" class="btn-submit-val btn btn-primary icon-standard button-standard" onclick="save_page($('#formValidate *'));">Continue</a>
    </div>

</form>

Comments