如果表单通过HTML5验证有效并将表单数据存储在本地存储中，请使用Javascript进行检查

Im a bit new to javascript and jquery. Well, I have form that Im trying to check its HTML5 validation using Javascript. If the form is valid I'd like to store data in localstorage WITHOUT RELOADING the web page. Here's my form:

<form id="form-projet" method="Post"><!-- beginning of form -->
            <div class="form-group">
                <label for="">Votre situation</label> <select class="form-control" required="required">
                    <option value="" disabled selected><i>-- Choisissez -- </i></option>
                    <option>Propri&eacute;taire</option>
                    <option>Locataire</option>
                    <option>Futur propri&eacute;taire</option>
                </select>
            </div>
            <div class="form-group">
                <label for="">Type du bien</label> <select class="form-control" required="required">
                    <option value ="" disabled selected><i>-- Choisissez -- </i></option>
                    <option>Maison</option>
                    <option>Appartement</option>
                    <option>Immeuble</option>
                </select>
            </div>
            <div class="form-group">
                <label for="">Etat du bien</label> <select class="form-control" required="required">
                    <option value ="" disabled selected><i>-- Choisissez -- </i></option>
                    <option>Achev&eacute;</option>
                    <option>En cours de construction</option>
                    <option>En projet</option>
                </select>
            </div>
            <div class="form-group">
                <label for="">Votre &eacute;nergie de chauffage actuelle ?</label> <select
                    class="form-control"  required="required">
                    <option value ="" disabled selected><i>-- Choisissez -- </i></option>
                    <option>Rien</option>
                    <option>Fioule</option>
                    <option>Gaz</option>
                    <option>El&eacute;ctrique</option>
                </select>
            </div>
            <!-- <div class="form-group">
            <label for="">Code postal de votre projet</label> <input
                class="form-control" type="text">
        </div> -->
            <div class="form-group">
                <label for="">Description</label>
                <textarea placeholder='D&eacute;crivez votre besoin..' class="form-control no-resize" type="text"  required="required"></textarea>
            </div>
            <div class="form-group">
                <label for="">D&eacute;lai de r&eacute;alisation</label> <select
                    class="form-control  required="required"">
                    <option value ="" disabled selected><i>-- Pr&eacute;cisez -- </i></option>
                    <option>Imm&eacute;diat</option>
                    <option>Moins d'un mois</option>
                    <option>1 &agrave; 3 mois</option>
                </select>
            </div>
             <input id="subTest" type="submit" class="btn btn-primary col-lg-5 col-md-5 col-lg-offset-7" value="CONTINUER">
    </form>

And here's my javascript:

$(document).ready(function() { SubmitClick(); }); 
function SubmitClick() {
     $("#subTest").click(function(event) {
         if($("#form-projet").valid()){
             event.preventDefault();
             alert("the form is valid"); 
            }else{
                alert("the form is NOT valid"); 
            } 
            }); 
        /* if($("#form-projet").valid()){
             alert("it's valid");
         }else{
             alert("it's not valid");
         }*/

     }); }

I would really appreciate it if any of you would provide a working solution ! Im searched for hours now.. and no solution though is seems very doable, but not for me.

Check for the invalid pseudo-class:

if ($('#form-projet').is(':invalid') != 0) {
   //there are invalid inputs
}

JQuery - How to test if an input element has the valid or invalid pseudo-class applied?