Change form style in Bootstrap for validation

Question

I found a code snippet which exactly is whatever I need, with a little change. The sample code is here , and I tried to create a sample form which can be accessed here . The only adjustment I need is, I want to show asterisk for mandatory fields once the form loaded. But as of now, it shows an error style (which is not desired when the page opens). How can I change the form?

Script

    $(document).ready(function() {
    $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
        var $form = $(this).closest('form'),
            $group = $(this).closest('.input-group'),
            $addon = $group.find('.input-group-addon'),
            $icon = $addon.find('span'),
            state = false;

        if (!$group.data('validate')) {
            state = $(this).val() ? true : false;
        } else if ($group.data('validate') == "email") {
            state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
        } else if ($group.data('validate') == 'phone') {
            state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
        } else if ($group.data('validate') == "length") {
            state = $(this).val().length >= $group.data('length') ? true : false;
        } else if ($group.data('validate') == "number") {
            state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
        }

        if (state) {
            $addon.removeClass('danger');
            $addon.addClass('success');
            $icon.attr('class', 'glyphicon glyphicon-ok');
        } else {
            $addon.removeClass('success');
            $addon.addClass('danger');
            $icon.attr('class', 'glyphicon glyphicon-remove');
        }

        if ($form.find('.input-group-addon.danger').length == 0) {
            $form.find('[type="submit"]').prop('disabled', false);
        } else {
            $form.find('[type="submit"]').prop('disabled', true);
        }
    });

    $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});

HTML

 <div class="container">
   <div class="row">
      <h2>Input Validation + Colorful Input Groups</h2>
   </div>
   <div class="row">
      <div class="col-sm-offset-4 col-sm-4">
         <form method="post">
            <div class="form-group">
               <label for="validate-text">Validate Text</label>
               <div class="input-group">
                  <input type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Validate Text" required>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-optional">Optional</label>
               <div class="input-group">
                  <input type="text" class="form-control" name="validate-optional" id="validate-optional" placeholder="Optional">
                  <span class="input-group-addon info"><span class="glyphicon glyphicon-asterisk"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-optional">Already Validated!</label>
               <div class="input-group">
                  <input type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Validate Text" value="Validated!" required>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-email">Validate Email</label>
               <div class="input-group" data-validate="email">
                  <input type="text" class="form-control" name="validate-email" id="validate-email" placeholder="Validate Email" required>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-phone">Validate Phone</label>
               <div class="input-group" data-validate="phone">
                  <input type="text" class="form-control" name="validate-phone" id="validate-phone" placeholder="(814) 555-1234" required>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-length">Minimum Length</label>
               <div class="input-group" data-validate="length" data-length="5">
                  <textarea type="text" class="form-control" name="validate-length" id="validate-length" placeholder="Validate Length" required></textarea>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-select">Validate Select</label>
               <div class="input-group">
                  <select class="form-control" name="validate-select" id="validate-select" placeholder="Validate Select" required>
                     <option value="">Select an item</option>
                     <option value="item_1">Item 1</option>
                     <option value="item_2">Item 2</option>
                     <option value="item_3">Item 3</option>
                  </select>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <div class="form-group">
               <label for="validate-number">Validate Number</label>
               <div class="input-group" data-validate="number">
                  <input type="text" class="form-control" name="validate-number" id="validate-number" placeholder="Validate Number" required>
                  <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
               </div>
            </div>
            <button type="submit" class="btn btn-primary col-xs-12" disabled>Submit</button>
         </form>
      </div>
   </div>
</div>

Answer 1

You need to comment following line from your script.

$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');

This is last line in your document.ready . This is the line responsible triggering change event on page load and changing asterisk to cross. Just comment this line and you are good to go.

EDIT Add danger class instead of info class; this will show your asterisk in red by default and on validation it will get green background with a check mark. Ie modify your asterisk form-group as following. Optional

NOTE Undo script changes I suggested before.