jQuery add trigger to submit

Change class name on click in jQuery

by helgatheviking

HTML

<form>
  <div class="nyp">

    <input type="text" data-minimum="49" />
    <div class="error" style="display: none">
      some error
    </div>
  </div>

  <div class="nyp">

    <input type="text" data-minimum="19" />
    <div class="error" style="display: none">
      some error
    </div>
  </div>
  <button type="text">Submit</button>
</form>

CSS

body {
  background: #eee;
  padding: 20px;
  font-family: Helvetica;
}

form {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

button.disabled {
  opacity:  .5;
}

input {
  border: 1px solid CCC;
}
input.error {
  border-color: #CC0000;
}

#error {
  color: #cc0000;
}

JavaScript

// find elements
var button = $("button")
var form = $("form")


// handle click and add class
form.on("submit", function(e) {
  console.log('input validation status', input.data('valid'));
  console.log('form initialized status', form.data('initialized'));

  var valid = true;

  $(".nyp").each(function() {
    var input = $(this).find('input');
    if (typeof input.data('valid') === 'undefined') {
      console.log('trigger validate');
      input.trigger("validate")
    }

    if (!input.data('valid')) {
      valid = false;
      return false;
    }

  });

  if (!valid) {
    console.log('cannot submit');
    button.addClass('disabled')
    e.preventDefault();
  }





  console.log('submitted');
  form.data('initialized', true);
  e.preventDefault();
})


$('input').on("change", function(e) {
  console.log('change');
  $('input').removeData('valid');
  $('input').trigger('validate');
});

button.on("click", function(e) {
  console.log('click handler');
});


$('input').on('validate', function(e) {
  console.log('validate');
  if (parseFloat($('input').val()) > parseFloat($('input').data('minimum'))) {
    console.log('valid input');
    $('input').data('valid', true);
  } else if (form.data('initialized')) {
    console.log('not valid input');
    $('input').next('.error').slideDown(function() {
      $('input').focus();
    });
    $('input').data('valid', false);
  }
});


form.submit();