使用 Javascript 检查表单是否通过 HTML5 验证有效并将表单数据存储在本地存储中答案

【问题标题】：Check using Javascript if form is valid by HTML5 validation and store form data in local storage使用 Javascript 检查表单是否通过 HTML5 验证有效并将表单数据存储在本地存储中
【发布时间】：2015-11-28 06:02:04
【问题描述】：

我对 javascript 和 jquery 有点陌生。好吧，我有表格，我试图使用 Javascript 检查其 HTML5 验证。如果表单有效，我想将数据存储在本地存储中而不重新加载网页。这是我的表格：

<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");
         }*/

     }); }

如果你们中的任何人能提供一个可行的解决方案，我将不胜感激！我现在搜索了几个小时......虽然没有解决方案似乎很可行，但不适合我。

【问题讨论】：

标签： javascript php jquery html validation

【解决方案1】：

检查无效的伪类：

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?

【讨论】：

如果表单上的某些内容无效，浏览器会自动将 :invalid 伪类添加到其中，以便您可以适当地设置样式，但您也可以检查 JS 中是否存在该伪类。各个输入也有 :valid 和 :invalid 伪类，您也可以检查它们。