我对javascript和jquery有点陌生。好吧,我有形式,我试图检查它的HTML5验证使用Javascript。如果表单是有效的,我想将数据存储在本地存储没有重新加载网页。这是我的表单:
<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étaire</option>
<option>Locataire</option>
<option>Futur proprié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é</option>
<option>En cours de construction</option>
<option>En projet</option>
</select>
</div>
<div class="form-group">
<label for="">Votre é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é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écrivez votre besoin..' class="form-control no-resize" type="text" required="required"></textarea>
</div>
<div class="form-group">
<label for="">Délai de réalisation</label> <select
class="form-control required="required"">
<option value ="" disabled selected><i>-- Précisez -- </i></option>
<option>Immédiat</option>
<option>Moins d'un mois</option>
<option>1 à 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");
}*/
}); }
如果你们中有人能提供一个可行的解决方案,我将非常感激!我已经找了好几个小时了。没有解决方案,虽然这似乎是非常可行的,但不适合我。
检查无效伪类:
if ($('#form-projet').is(':invalid') != 0) {
//there are invalid inputs
}
如何测试输入元素是否有有效或无效的伪类应用?