Edit in JSFiddle

var f = document.querySelector('form');
var d = document.querySelector('div');
var i = document.querySelector('input[required]');

f.addEventListener('submit', function(e){
  //checkValidity returns a boolean
  if (this.checkValidity()){
    f.style.backgroundColor = 'green';
    alert('woooo');
    e.preventDefault();
  } else {
    f.style.backgroundColor = 'red';
    alert(i.getAttribute('title'));
    e.preventDefault();
  }
});

<form>
    <div>
    <label>Sex:
      <input name=sex pattern=[MF] placeholder=M/F 
      title="Your sex must either be M or F" required>
    </label>
    <input type=submit>
    </div>
  </form>