Check for JS validation before submitting form

Question

Hi!

I am using Signature Pad to capture signatures on an iPad and then send it for storage. The script I am using has a feature for checking if there is a signature present when pressing submit. If there is no signature it does not send the request and it displays an error.

I am working on making the submit button disabled and change text when pressed. This did not work as the page "froze" before the changes happend. So my solution is to delaying the form submit with javascript, and this works great! Problem is, if there is no signature it still gets submitted.

How can I write a javascript conditional for checking if the validation fails/passes?

HTML:

                      <ul class="sigNav">
                        <li class="clearButton"><a href="#clear">Tøm signatur</a></li>
                      </ul>
                      <div class="sig sigWrapper">
                        <!-- <div class="typed"></div> -->
                        <canvas class="pad" width="795" height="245"></canvas>
                        <input type="hidden" name="output" class="output">
                      </div>
                      <p style="margin-top:15px;"><strong>Trykk kun én gang!</strong></p>
                      <button type="submit" class="btn btn-primary btn-lg SeeMore2 m-b-5 m-t-10">Bekreft og godta vilkår</button>

JS: <script src="{{ URL::asset('signature/jquery.signaturepad.js') }}"></script> <script> $(document).ready(function() { var options = { bgColour : '#fff' , drawOnly : true , lineTop : 200 , errorMessageDraw : 'Vennligst signer i feltet under.' }; $('.sigPad').signaturePad(options); }); </script>

    <script>
    $('form').submit(function (e) {
      var form = this;
      e.preventDefault();
      setTimeout(function () {
          form.submit();
      }, 1000); // in milliseconds
    });
    </script>

    <script>
    $('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore');
    if($this.hasClass('.SeeMore2')){
      $this.text('Bekreft og godta vilkår');
    } else {
      $this.text('Vennligst vent...');
    }
    });
    </script>
    <script src="{{ URL::asset('signature/assets/json2.min.js') }}"></script>

Answer 1 · 2015-11-09T22:20:33Z

November 9, 2015 10:20pm

Hm, my first instinct is:

if (signatureInDatabase) {
  disableSubmitButtom; 
}else{
yourNormalCode;
}

remove.Class is jquery that might work and you can find more info here: https://api.jquery.com/removeclass/. Otherwise there might be ways where you don't create a "submit" button in html but rather in jquery or js but only if the signature isn't in the db.

Welcome to the Treehouse Community

Looking to learn something new?

Erik Tobiassen

Erik Tobiassen

Check for JS validation before submitting form

1 Answer

Falk Schwiefert

Falk Schwiefert