通過HTML5驗證使用Javascript檢查表單是否有效，並將表單數據存儲在本地存儲中

Question

我對javascript和jquery有點陌生。 好吧，我有一張表格，我正在嘗試使用Javascript檢查其HTML5驗證。 如果表單有效，我想在不重新加載網頁的情況下將數據存儲在localstorage中。 這是我的表格：

<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>

這是我的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");
         }*/

     }); }

如果您能提供可行的解決方案，我將不勝感激！ 我現在搜索了幾個小時..雖然沒有解決方案似乎非常可行，但對我而言卻不是。

Answer 1

檢查無效的偽類：

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

jQuery-如何測試輸入元素是否應用了有效或無效的偽類？