當使用JQuery糾正錯誤時，輸入字段突出顯示爲綠色

我正在使用窗體，當輸入字段爲空時，單擊打印按鈕以打印時，應該返回false並將字段突出顯示爲紅色。與此同時，當一個輸入字段有一個值時，字段應該突出顯示綠色，但這不適用。如果一個領域有價值，其他領域則不具備;在點擊按鈕打印時，帶值的字段應該突出顯示綠色，其他值不顯示紅色。當使用JQuery糾正錯誤時，輸入字段突出顯示爲綠色

的Javascript

if (err !== 0){ 
$("#one, #two, #three, #four").effect("highlight", {color:"red"}, 
3000); 
    $.notify("All fields with * must be filled", { 
     position: 'bottom right', 
     autoHide: true, 
     autoHideDelay: 5000 
    }); 
return false; 
} 
else { 
    if ($("#one") !== "" && $("#two, #three, #four") == ""){ 
    $("#one").effect("highlight", {color:"green"}, 3000); 
    return false; 
} 
if ($("#two") !== "" && $("#one, #three, #four") == ""){ 
    $("#two").effect("highlight", {color:"green"}, 3000); 
    return false; 
} 
if ($("#three") !== "" && $("#one, #two, #four") == ""){ 
    $("#three").effect("highlight", {color:"green"}, 3000); 
    return false; 
} 
if ($("#four") !== "" && $("#one, #three, #two") == ""){ 
    $("#four").effect("highlight", {color:"green"}, 3000); 
    return false; 
} 
var print = true; 
}

來源

2016-01-11 Pappy

能否請您提供的HTML代碼？ –

嗨，你能爲你的問題創建一個小提琴。 – Help

我在這fiddle做出了表率，我沒有使用你確切的代碼，但它背後的意義。

$("button").click(function() { 
 
    $("input").each(function() { 
 
    if ($(this).val() == "") { 
 
     $(this).css("border", "2px solid red"); 
 
    } 
 
    }); 
 
}); 
 

 
$("input").change(function() { 
 
    if ($(this).val() !== "") { 
 
    $(this).css("border", "2px solid green"); 
 
    } 
 
})

.form { 
 
    width: 200px; 
 
    height: 100%; 
 
    border: 2px solid #e5e5e5; 
 
    background-color: lightblue; 
 
} 
 
label { 
 
    margin-right: 20px; 
 
} 
 
input, 
 
select { 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 

 
    <label for="txtName">Name</label> 
 
    <input type="text" id="txtName" /> 
 

 
    <label for="txtSurname">Surname</label> 
 
    <input type="text" id="txtSurname" /> 
 

 
    <label for="txtSex">Sex</label> 
 
    <select id="txtSex"> 
 
    <option value="Male">Male</option> 
 
    <option value="Female">Female</option> 
 
    </select> 
 
    <br/> 
 
    <button> 
 
    Print! 
 
    </button> 
 

 
</div>

來源

2016-01-11 12:26:23 Jorrex

試試這個。

$(document).ready(function() { 
     $('#print').click(function(){ 
     var err = 0; 
     if ($("#one").val() == ""){ 
      $("#one").effect("highlight", {color:"red"}, 3000); 
       err++; 
     } else { 
      $("#one").effect("highlight", {color:"green"}, 3000); 
     } 

     if ($("#two").val() == ""){ 
      $("#two").effect("highlight", {color:"red"}, 3000); 
       err++; 
     } else { 
      $("#two").effect("highlight", {color:"green"}, 3000); 
     } 

     if ($("#three").val() == ""){ 
      $("#three").effect("highlight", {color:"red"}, 3000); 
       err++; 
     } else { 
      $("#three").effect("highlight", {color:"green"}, 3000); 
     } 
     if ($("#four").val() == ""){ 
      $("#four").effect("highlight", {color:"red"}, 3000); 
       err++; 
     } else { 
      $("#four").effect("highlight", {color:"green"}, 3000); 
     } 


     if (err !== 0){ 

      $.notify("All fields with * must be filled", { 
       position: 'bottom right', 
       autoHide: true, 
       autoHideDelay: 5000 
      }); 
     return false; 
     } 
    }); 
});

來源

2016-01-11 10:59:48

$(document).ready(function() { 
    $('.inputs').change(function() {  
     $('.inputs').each(function() { 
      if ($(this).val() == "") {  
       $(this).attr('style', "border-radius: 5px; border:red 1px solid;");  
      } else {  
       $(this).attr('style', "border-radius: 5px; border:green 1px solid;");  
      }  
     });  
    });  
});

添加inputs類每個輸入元素做出改變通緝

來源

2016-01-11 11:39:33 Aswathy

當使用JQuery糾正錯誤時，輸入字段突出顯示爲綠色

回答

相關問題