如何在使用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

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 2

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;
});