少なくとも入力されていないときにすべての入力フィールドの境界が赤くなる

Question

私はJavaScriptで十分ではありません。単純に私はいくつかの入力フィールドを持つフォームを持っています。ユーザーは少なくとも1つを入力する必要があります。私はすでにこれを行うための正しいコードを見つけました。このコードは、警告メッセージを使用してエラーが発生したことをユーザーに通知します。しかし、私は同じコードを使用してこのアラートメッセージの代わりにすべての入力フィールドの境界線を赤にしたい。

HTML

<form id="myform" action="" method="post"> 
    <input name="destination" class="form-control" type="text" > 
    <input name="thingstodo" class="form-control" type="text"> 
    <input name="gsearch" class="form-control" type="text"> 
    <button type="submit" name="search">Search</button> 
</form> 

はJavaScript

$(function(){ 
    $("#myform").submit(function(){ 

    var valid=0; 
    $(this).find('input[type=text]').each(function(){ 
     if($(this).val() != "") valid+=1; 
    }); 

    if(valid){ 
     return true; 
    } 
    else { 
     alert("error: you must fill in at least one field"); 
     return false; 
    } 
    }); 
}); 

おかげ

Answer 1

CSSスタイルを設定することでそれを行うことができます。これはjQuery構文で最も簡単に実行できます。

$(function(){ 
    $("#myform").submit(function(){ 

    var valid = 0; 
    $(this).find('input[type=text]').each(function(){ 
     if($(this).val() != "") { 
     valid++; 
     $(this).css("border-color", "initial"); 
     } 
     else { 
     $(this).css("border-color", "red"); 
     } 
    }); 

    if (valid > 0) { return true; } 
    else { return false; } 
    }); 
}); 

Answer 2

ので

$(function(){ 
$("#myform").submit(function(){ 

var valid=0; 
$(this).find('input[type=text]').each(function(){ 

    if($(this).val() != "") valid+=1; 
else 
$(this).style.border = "solid 1px red" 
}); 

if(valid){ 
    return true; 
} 
else { 
    return false; 
} 
}); 
}); 

のようなコードを変更します。

Answer 3

これはいかがですか？

$(function(){ 
 
    $("#myform").submit(function(){ 
 
    var dirty = false; 
 
    $('input[type=text]').each(function(){ 
 
     if($(this).val().length){ 
 
      dirty = true; 
 
     } 
 
    }); 
 
    if(!dirty){ 
 
     $('input[type=text]').each(function(){ 
 
     $(this).css('border','1px solid red'); 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" action="" method="post"> 
 
    <input name="destination" class="form-control" type="text" > 
 
    <input name="thingstodo" class="form-control" type="text"> 
 
    <input name="gsearch" class="form-control" type="text"> 
 
    <button type="submit" name="search">Search</button> 
 
</form>