通过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-如何测试输入元素是否应用了有效或无效的伪类？