jquery - jQuery で空のフィールドをマークする

Question

次の形式で構造化されたフィールドを持つフォームがあります。

<span class="req">*</span>
<label for="name">Name</label><br>
<input type="text" id="name">

送信時に、前にアスタリスクが付いている空のフィールドにマークを付けたいと思います。を使用.each()してフォーム フィールドをループできると思いますが、必須フィールドのみを対象にするにはどうすればよいですか?

Answer 1

$('.req').each(function(){
    if($(this).text()=='*') {
        if(!$(this).siblings('input').val()) {//Has no value
            //DO STUFF HERE
        }
    }
});

このような？

または、次のようなこともできます。

$('input').each(function(){
    //IF NO VALUE AND IS REQUIRED
    if(!$(this).val() && $(this).siblings('.req').length != 0) {
        $(this).addClass('error');//AS PRAVEEN SUGGESTS
        alert('Field is required');
    }
});

警告spanこのコードは、labelとinputが別の要素の内部にあり、他の入力 と を共有しないことを 前提としています.req。それ以外の場合、.siblings()メソッドは複数の要素を返します。

Answer 2

空であってはならない s にクラスを指定してくださいrequired。inputそして、この機能を使用します：

$('.required').each(function(){
    if($(this).val() == '') {
        $(this).addClass("error");
    }
});

CSS では、次のように定義.errorします。

.error {border: 1px solid #f00;}

デモ: http://jsfiddle.net/jr8r9/