How do I validate a form before submitting with js?

Question

I'm working on a contact form in which I have set the required attribute but it keeps sending anyway even if the field has no info in it. I'm validating my fields like this:

<input type="text" name="grado" id="grado" placeholder="Grado a cursar" required oninvalid="this.setCustomValidity('Por favor, llena todos los campos')" oninput="setCustomValidity('')"/>

And my js:

<script>
    $("#contactForm").submit(function(event) {
        /* stop form from submitting normally */
        event.preventDefault();
        /* get some values from elements on the page: */
        var $form = $( this ),
            $submit = $form.find( 'button[type="submit"]' ),
            grado_value = $form.find( 'input[name="grado"]' ).val(),
            url = $form.attr('action');

        /* Send the data using post */
        var posting = $.post( url, { 
            grado: grado_value,
        });

        posting.done(function( data ){
        /* Put the results in a div */
            $( "#contactResponse" ).html(data);

        /* Change the button text. */
            $submit.text('Enviado');
        /* Disable the button. */
            $submit.attr("disabled", true);
        });
    });
</script>

Is there any way to validate form before submitting?

Answer 1

For a start, validation on the change event of every form element will be easier. If you want to validate and form a submission (in a sequence) inside submit then I can imagine the logic. Make your own.

has_error_first_name = false
has_error_last_name = false

function check_first_name() {
   if(form.first_name === ''){
      has_error_first_name = true
      return check_last_name(false)
   } else {
      has_error_first_name = false
      return check_last_name(true)
   }
}

function check_last_name(prev_validation) {
    if(form.last_name === ''){
      has_error_last_name = true
      return prev_validation && false
   } else {
      has_error_last_name = false
      return prev_validation && true
   }
}

function validate() {
    return check_first_name()
}  

if (validate()) {
      // do form submit using fetch or whatever
}

Answer 2

Safari submits the form regardless its validity, so you cannot rely on browser validation. I'm not able to test on Safari right now, but this workaround should work. It's based on your code but does not use the validation:

First, set the novalidate attribute in your form

<form id="contactForm" novalidate>
  <input type="text" name="grado" id="grado" placeholder="Grado a cursar" required />
  <button type="submit">Send</button>
</form>

Then check for validity in the submit event handler and show/hide errors as needed:

$("#contactForm").submit(function(event) {
  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      $submit = $form.find( 'button[type="submit"]' ),
      grado_value = $form.find( 'input[name="grado"]' ).val(),
      url = $form.attr('action');

  if (!event.target.checkValidity()) {
    // the form is not valid
    // show some nice errors, I'm just changing the button text here
    $submit.text('wrong');
    return false;
  }

  // send your data here, the form should be valid
  $submit.text('Enviado');
  $submit.attr("disabled", true);
});

Notes:

• You may consider using a validation library or plugin to ease the job.
• You may need to add classes to style the valid/invalid inputs, as far as I know Safari does not render the :valid and :invalid pseudo-classes.
• Perform validation on the server too.

Answer 3

You have to return: false; to prevent it from sending.

Example:

$("#contactForm").submit(function (event) {
  var valid = false;
  // ... validation ... if data is valid, set valid to true
  if (!valid) return false;
});