Ho bisogno di convalidare un modulo con jQuery. Posso controllare tutti i miei input uno per uno, ma non è una soluzione molto pratica.Come verificare se tutti gli input non sono vuoti con jQuery
Come posso verificare se tutti i miei ingressi non sono vuoti in modo più efficiente? Nella mia forma posso avere input elementi di diverse tipologie: testo, diversi gruppi di radio, selezionare ecc
Uso each:
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
Tuttavia probabilmente sarà meglio usare qualcosa di simile jQuery validate che IMO è più pulito.
Non funziona, ho sempre ays false –
@ ClémentAndraud - assegna isValid = true prima di 'each' –
Penso che ci sia un problema se ho diversi gruppi di pulsanti di opzione. –
Basta usare:
$("input:empty").length == 0;
Se è pari a zero, nessuno è vuoto.
essere un po 'più intelligente e anche se anche filtrare oggetti con pochi spazi in, si potrebbe fare:
$("input").filter(function() {
return $.trim($(this).val()).length == 0
}).length == 0;
: il selettore vuoto non funzionerà come previsto, in quanto viene utilizzato per selezionare tutti gli elementi senza figli. – Yeonho
La funzione di filtro deve essere 'return $ .trim ($ (this) .val()). Length === 0'. –
$('#form_submit_btn').click(function(){
$('input').each(function() {
if(!$(this).val()){
alert('Some fields are empty');
return false;
}
});
});
Si può fare it.here è il codice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;}
textarea{height:auto;}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);height: 20px;}
select,input[type="radio"],input[type="checkbox"]{margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;}
select,input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
.uneditable-textarea{width:auto;height:auto;}
#country{height: 30px;}
.highlight
{
border: 1px solid red !important;
}
</style>
<script>
function test()
{
var isFormValid = true;
$(".bs-example input").each(function(){
if ($.trim($(this).val()).length == 0){
$(this).addClass("highlight");
isFormValid = false;
$(this).focus();
}
else{
$(this).removeClass("highlight");
}
});
if (!isFormValid) {
alert("Please fill in all the required fields (indicated by *)");
}
return isFormValid;
}
</script>
</head>
<body>
<div class="bs-example">
<form onsubmit="return test()">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
I volevo solo sottolineare la mia risposta poiché so che il ciclo for è più veloce del ciclo $.each qui:
basta aggiungere class="required" agli ingressi che si desidera essere richiesto e poi in jquery fare:
$('#signup_form').submit(function(){
var fields = $('input.required');
for(var i=0;i<fields.length;i++){
if($(fields[i]).val() != ''){
//whatever
}
}
});
Punto minore: tecnicamente, l'OP chiedeva di non essere vuoto. Questo controlla per vuoto. – bphilipnyc
hai ragione! fisso! –
$('input').each(function() {
if ($(this).val() != '') {
console.log('all inputs filled');
}
else{
console.log('theres an empty input');
return false
}
});
si potrebbe desiderare di avvolgere questo in una funzione keyup
scrivono stessa classe per tutti i campi desiderati per convalidare e quindi usare poi wirte $ ('. classname'). val()! = '' – swetha
possibile duplicato di [Controllare se TUTTI gli input del modulo sono vuoti con jQuery] (http://stackoverflow.com/questions/10517315/ check-if-all-form-input-are-empty-with-jquery) spero che sia d'aiuto e io non sono il down voter ': ' –