2013-08-27 75 views
3

如果名稱denominationcomune _ {{loop.index}}和denominationcomune _ {{loop.index}}的輸入爲空而不是全部輸入,如何檢查jQuery?檢查輸入表單是否爲空jQuery

我有這樣的樹枝:

<form action="" method="post"> 
    {% for mat in mat_temp_array %} 
     <input type="text" name="nomentite_{{loop.index}}"/> 
     <input type="text" name="denominationcomune_{{loop.index}}" value="{{ mat.denominationcommun }}"/> 
     <input type="text" name="denominationcomerce_{{loop.index}}" value="{{ mat.denominationcomerce }}"/> 
    {% endfor %} 

    <input type="submit" class="btn" value="save"/> 
</form> 

回答

4
var empty = true; 
$('input[type="text"]').each(function(){ 
    if($(this).val()!=""){ 
     empty =false; 
     return false; 
    } 
}); 

這應該是所有輸入和空VAR設置爲false,如果至少有一個不爲空。

0

你可以做這樣的:

bool areFieldEmpty = YES; 
//Label to leave the loops 
outer_loop; 

//For each input (except of submit) in your form 
$('form input[type!=submit]').each(function(){ 
    //If the field's empty 
    if($(this).val() != '') 
    { 
     //Mark it 
     areFieldEmpty = NO; 
     //Then leave all the loops 
     break outer_loop; 
    } 
}); 

//Then test your bool 
0

你可以用簡單的jQuery循環做到這一點。

總碼

<!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>