Le code HTML rendu de ma forme est lorsque aucune valeur n'est entrée, la validation fonctionne bien. mais comment puis-je traiter également zéro comme null? Si l'utilisateur entre 0 en entrée, aucune validation ne se produit. Puis-je étendre la propriété requise pour des valeurs zéro aussi? Le champ est requis est affiché.
3 Réponses :
Vous avez été vraiment confus de la validation HTML5 (vous avez mentionné ici la validation de Bootstrap) et la validation de JQuery. Les deux sont différents en perspective des aspects de développement.
Donc, pour différencier les deux aspects, j'ai ajouté 2 formulaires, premier avec une validation HTML5 normale et une seconde avec le plug-in JQyery Validate. Tous les deux remplissent votre attente, mais JQuery sera un peu mieux pour que HTML5 dépend de votre navigateur. p>
p>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
form {
margin: 30px;
padding: 30px;
border: 1px solid #8c8c8c;
}
label.error {
color: red;
margin-top: 5px;
}
.submit {
margin-top: 15px;
display: block;
}
.form-label {
margin-top: 10px;
display: block;
}
</style>
<div class="container">
<form id="val" action="" method="post">
<h4>Validation With HTML5</h4>
<div class="form-group col-xl-6">
<label class="form-label" for="SalePrice">Sale price</label>
<input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10" required="">
<button id="submit" class="submit btn btn-success">Submit</button>
</div>
</form>
<form id="val2" action="" method="post" novalidate>
<h4>Validation with <a href="https://jqueryvalidation.org/validate/">jQuery Validation Plugin</a></h4>
<div class="form-group col-xl-6">
<label class="form-label" for="SalePrice">Sale price</label>
<input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10">
<label class="form-label" for="email">Email</label>
<input class="form-control" id="email" type="email" name="email">
<button id="submit1" class="submit btn btn-success">Submit</button>
</div>
</form>
</div>Pour cette exigence, nous pouvons le faire de deux manières. 1) Pas besoin d'écrire des validations dans JQuery, il est directement nécessaire d'utiliser la validation des formulaires. Lors de la soumission du formulaire ou de toute classe de boutons de page, fournissez comme soumission et utilisez le formulaire Soumettre. Pour EX: -
`<div class="form-group col-xl-6">
<label class="form-label" for="SalePrice">Sale price</label>
<input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0" max="99999" step="0.10" required="">
<div class="invalid-feedback" style="display:none">
The field is required
</div>
</div>`
`<script type="text/javascript">
$(document).ready(function(){
$("#SalePrice").change(function(){
var saleprice = parseInt(($(this).val() == "" || $(this).val() == 0) ? 0 : $(this).val());
if(saleprice == 0)
$(".invalid-feedback").show();
else
$(".invalid-feedback").hide();
});
});
</script>`
Oui, vous pouvez valider davantage pour l'obtenir comme ceci:
$('#SalePrice').on('keyup', function(){
if($(this).val() == 0){
alert("Price Not Accepted!");
$(this).val("");
}
})
Vous pouvez changer la valeur "min" sur "0,10"
La validation de bootstrap n'est pas la même que le plugin JQuery Validate. S'il vous plaît étiqueter correctement. Édité.