Me gustaría hacer la verificación de una entrada del usuario "en vivo". Por ejemplo, hasta que el usuario no haya escrito al menos 4 caracteres en la entrada, el formulario debe estar rodeado de rojo.
Por ahora, aquí está mi código, donde el color rojo solo aparece después de que el usuario envíe el formulario:
$(function(){
$("form").on("submit", function() {
if($("input").val().length < 4) {
$("div.modal-dialog").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="html">
<button data-toggle="modal" data-backdrop="false" href="#formu" class="btn btn-primary">Informations</button>
</div>
<div class="modal fade" id="formulaire">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Your infos :</h4>
</div>
<div class="modal-body">
<form action="#">
<div class="form-group">
<label for="nom">Nom</label>
<input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
</div>
<button type="submit" class="btn btn-default">Envoyer</button>
</form>
</div>
</div>
</div>
</div>
</div>Ya revisé en Google y hay una biblioteca llamada Formvalidation pero está pagando, me gustaría poder hacer este efecto sin ninguna biblioteca adicional que no sea jQuery.
2 respuestas
Por favor revise este código
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#test_form').validate({
focusInvalid: true,
onkeyup: true,
rules: {
nom: {
required: true,
minlength: 4
}
},
messages: {
nom: {
required: "Nom is required."
}
},errorPlacement: function (error, element) {
alert(error.text());
}
});
});
</script>
<style type="text/css">
label.error {
border: 1px solid red;
color: red;
}
</style>
Y este es tu formulario html
<form id="test_form">
<div class="container">
<div id="html">
<button data-toggle="modal" data-backdrop="false" href="#formu" class="btn btn-primary">Informations</button>
</div>
<div class="modal fade" id="formulaire">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Your infos :</h4>
</div>
<div class="modal-body">
<form action="#">
<div class="form-group">
<label for="nom">Nom</label>
<input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
</div>
<button type="submit" class="btn btn-default">Envoyer</button>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
Si desea agregar más validación, también puede agregar esto
Para <input type="text" />, use el evento keyup:
var $form = $("form");
var $input = $("#nom");
$input.on("keyup", function(evt) {
if($input.val().length < 4)
$form.addClass("invalid");
else
$form.removeClass("invalid");
}).invalid {
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<div class="form-group">
<label for="nom">Nom</label>
<input type="text" class="form-control" name ="nom" id="nom" placeholder="Votre nom">
</div>
<button type="submit" class="btn btn-default">Envoyer</button>
</form>Este evento se aplica a los tipos de entrada en los que el usuario realmente escribe (consulte W3 Tipos de entrada HTML).
Para las etiquetas <select>, <input type="checkbox" /> y <input type="radio" />, use .on('change'). Se aplica también para los tipos menos utilizados, como range.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.
En Español