Muszę sprawdzić poprawność formularza za pomocą jQuery. Mogę sprawdzić wszystkie moje dane wejściowe jeden po drugim, ale nie jest to bardzo praktyczne rozwiązanie.Jak sprawdzić, czy wszystkie dane wejściowe nie są puste przy użyciu jQuery
Jak mogę sprawdzić, czy wszystkie moje dane wejściowe nie są bardziej efektywne? W moim formularzu mogę mieć input elementy różnych typów: tekst, kilku grup radia, wybierz itp
Zastosowanie each:
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
Jednak prawdopodobnie będzie lepiej wyłączyć za pomocą coś jak jQuery validate które IMO odkurzacz.
Nie działa, mam alw ays false –
@ ClémentAndraud - przypisz isValid = true przed "każdym" –
Myślę, że jest problem, jeśli mam kilka grup przycisków radiowych. –
Wystarczy użyć:
$("input:empty").length == 0;
Jeśli jest to zero, nikt nie jest pusta.
być nieco mądrzejszy i choć także odfiltrować rzeczy z zaledwie spacjami, można zrobić:
$("input").filter(function() {
return $.trim($(this).val()).length == 0
}).length == 0;
: pusty selektor nie będzie działać zgodnie z przeznaczeniem, ponieważ służy do wybierania wszystkich elementów, które nie mają elementów podrzędnych. – Yeonho
Twoją funkcją filtru powinna być 'return $ .trim ($ (this) .val()). Length === 0'. –
$('#form_submit_btn').click(function(){
$('input').each(function() {
if(!$(this).val()){
alert('Some fields are empty');
return false;
}
});
});
Można zrobić it.here to kod
<!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 chciałem tylko wskazać moją odpowiedź, ponieważ wiem, że pętla for jest szybsza niż $.each pętla tutaj jest:
wystarczy dodać class="required" do wejść chcesz być wymagane, a następnie w jQuery zrobić:
$('#signup_form').submit(function(){
var fields = $('input.required');
for(var i=0;i<fields.length;i++){
if($(fields[i]).val() != ''){
//whatever
}
}
});
Niewielki punkt - technicznie OP prosił o nie puste. To sprawdza, czy są puste. – bphilipnyc
masz rację! naprawiony! –
$('input').each(function() {
if ($(this).val() != '') {
console.log('all inputs filled');
}
else{
console.log('theres an empty input');
return false
}
});
możesz owinąć to w funkcji keyup
napisać samą klasę dla wszystkich pól, które mają w celu sprawdzenia poprawności, a następnie użycia polecenia wirte $ (".nazwęklasy"). val()! '' ' – swetha
możliwy duplikat [sprawdzania, czy WSZYSTKIE dane wejściowe formularza są puste przy pomocy jQuery] (http://stackoverflow.com/questions/10517315/ check-if-all-form-input-is-empty-with-jquery) mam nadzieję, że to pomaga i nie jestem w dół wyborca ':)' –